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

uniapp 微信小程序 功能入口

单行单独展示

效果图

html

<view class="shopchoose flex jsb ac"  @click="routerTo('要跳转的页面')"><view class="flex ac"><image src="/static/dyd.png" mode="aspectFit" class="shopchooseimg"></image><text class="shopchooset1">当前门店:</text><text class="shopchooset2">{{测试门店 || ''}}</text></view><u-icon name="arrow-right" color="#232323" size="18"></u-icon></view>

css

	.shopchoose{width: 690rpx;padding: 20rpx 30rpx;box-sizing: border-box;border-radius: 8rpx;background: #fff;margin: auto;margin-top: 30rpx;.shopchooseimg{width: 40rpx;height: 40rpx;}.shopchooset1{margin-left: 15rpx;}.shopchooset2{color: #036045;margin-left: 15rpx;font-weight: bold;}}

一行多个功能按钮展示

效果图

html 

<view class="order-wrapper" :class="userInfo.svip_open?'':'height'"><view class="order-hd flex"><view class="left">我的服务</view></view><view class="order-bd"><block v-for="(item,index) in (isvip==1?orderMenu:orderMenub)" :key="index"><view class="order-item" @click.stop="index==0?go_sj():routerGo(item.url)"v-if="index==0?vuex_common.sjrz=='1':true"><view class="pic flex jc ac"><image class="iconfont" :src="item.img" mode="aspectFit"></image></view><view class="txt">{{index==0?(vuex_user.auth_status !==1?"入驻商家":"商家中心"):item.title}}</view></view></block></view></view>

js

			orderMenub: [{img: '/static/me10.png',title: '入驻商家',url: '/pages/goods/order_list/index?status=1'},{img: '/static/me4.png',title: '消费记录',url: '/pagesB/consume/consume'},{img: '/static/me13.png',title: '我的地址',url: '/pagesB/myAddress/myAddress?go_back=true'},{img: '/static/me14.png',title: '我的车辆',url: '/pagesE/addCarNum/addCarNum'},],

css

		.order-bd {display: flex;flex-wrap: wrap;padding: 0 0;.order-item {display: flex;flex-direction: column;justify-content: center;align-items: center;width: 20%;height: 140rpx;.pic {width: 86rpx;height: 86rpx;background: #F9FAFB;position: relative;text-align: center;border-radius: 12rpx;.iconfont {width: 48rpx;height: 48rpx;}}.picb {width: 86rpx !important;height: 86rpx !important;background: #F9FAFB;position: relative;text-align: center;.iconfont {width: 100%;height: 100%;}}.txt {margin-top: 6rpx;font-size: 26rpx;color: #333;font-family: 'Roboto' !important;}}}}

多行展示

效果图

html

<view class="card_2"><view class="order-hd flex"><view class="left">增值服务</view></view><button open-type="contact" class="card_2_item d-flex a-center j-sb"><image src="../../static/me12.png" mode="widthFix"></image><view class="d-flex a-center j-sb card_2_item_ipt" style="padding: 14rpx 0;"><span class="f-size-28 ">联系客服</span><u-icon name="arrow-right" size="14"></u-icon></view></button><view class="card_2_item d-flex a-center j-sb" @click="routerGo('/pagesB/CouponSquare/CouponSquare')"><image src="../../static/me8.png" mode="widthFix"></image><view class="d-flex a-center j-sb card_2_item_ipt"><span class="f-size-28 ">领券广场</span><u-icon name="arrow-right" size="14"></u-icon></view></view><view class="card_2_item d-flex a-center j-sb" @click="routerGo('/pagesB/invite/invite')"><image src="../../static/me7.png" mode="widthFix"></image><view class="d-flex a-center j-sb card_2_item_ipt"><span class="f-size-28 ">邀请好友</span><u-icon name="arrow-right" size="14"></u-icon></view></view><!-- <view class="card_2_item d-flex a-center j-sb" v-if="vuex_token" @click="logoutApi"><image src="../../static/me11.svg" mode="widthFix"></image><view class="d-flex a-center j-sb card_2_item_ipt"><span class="f-size-28 ">退出登录</span><u-icon name="arrow-right" size="14"></u-icon></view></view> --></view>

css

	.card_2 {width: 690rpx;background: #fff;margin: auto;margin-top: 26rpx;font-size: 28rpx !important;font-weight: 0 !important;padding: 30rpx 35rpx;box-sizing: border-box;.order-hd {justify-content: space-between;font-size: 32rpx;color: #282828;.left {font-weight: bold;}.right {display: flex;align-items: center;color: #666666;font-size: 26rpx;.icon-xiangyou {margin-left: 5rpx;font-size: 26rpx;}}}.card_2_item {// padding: 0rpx 28rpx;box-sizing: border-box;// margin-top: 30rpx !important;image {width: 40rpx;height: 40rpx;margin-right: 20rpx;}}.card_2_item_ipt {width: 618rpx;padding: 34rpx 0rpx;// border-bottom: 1rpx solid #F3F3F3;}}

有需求可自行修改

相关文章:

uniapp 微信小程序 功能入口

单行单独展示 效果图 html <view class"shopchoose flex jsb ac" click"routerTo(要跳转的页面)"><view class"flex ac"><image src"/static/dyd.png" mode"aspectFit" class"shopchooseimg"&g…...

Halcon 机器视觉案例 之 连接件测量

第一篇 机器视觉案例 之 连接件测量 文章目录 第一篇 机器视觉案例 之 连接件测量1.案例要求2.实现思路2.1 读取单张图片并创建图像模板2.2 画出圆和直线2.3 创建测量模型2.4 循环读取多张图片并查找图像中连接件位置2.5 根据偏移量补偿使得测量模型移动至指定位置 3.实现效果4…...

druid与pgsql结合踩坑记

最近项目里面突然出现一个怪问题&#xff0c;数据库是pgsql&#xff0c;jdbc连接池是alibaba开源的druid&#xff0c;idea里面直接启动没问题&#xff0c;打完包放在centos上和windows上cmd窗口都能直接用java -jar命令启动&#xff0c;但是放到国产信创系统上就是报错&#xf…...

Windows环境 (Ubuntu 24.04.1 LTS ) 国内镜像,用apt-get命令安装RabbitMQ,java代码样例

一、环境 Windows11 WSL(Ubuntu 24.04.1) 二、思路 1 用Windows中的Ubuntu安装RabbitMQ&#xff0c;贴近Linux的线上环境&#xff1b; 2 RabbitMQ用erlang语言编写的&#xff0c;先安装erlang的运行环境&#xff1b; 2 用Linux的apt-get命令安装&#xff0c;解决软件依赖…...

RabbitMQ的核心组件有哪些?

大家好&#xff0c;我是锋哥。今天分享关于【RabbitMQ的核心组件有哪些&#xff1f;】面试题。希望对大家有帮助&#xff1b; RabbitMQ的核心组件有哪些&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 RabbitMQ是一个开源的消息代理&#xff08;Messag…...

mysql免安装版配置教程

一、将压缩包解压至你想要放置的文件夹中&#xff0c;注意&#xff1a;绝对路径中要避免出现中文 二、在解压目录下新建my.ini文件&#xff0c;已经有的就直接覆盖 my.ini文件内容 [mysqld] # 设置3306端口 port3306 # 设置mysql的安装目录 basedirD:\\tools\\mysql-8.1.0-win…...

ubuntu+ros新手笔记(三):21讲没讲到的MoveIt2

1 安装MoveIt2 安装参照在ROS2中&#xff0c;通过MoveIt2控制Gazebo中的自定义机械手 安装 MoveIt2可以选择自己编译源码安装&#xff0c;或者直接从二进制安装。 个人建议直接二进制安装&#xff0c;可以省很多事。 sudo apt install ros-humble-moveitmoveit-setup-assistan…...

Charles简单压力测试

01、接口请求次数&#xff0c;并发量&#xff0c;请求延迟时间均可配置 选中需要进行测试的接口&#xff0c;鼠标右键选中【repeat advance】 02、设置并发参数 下面的图中&#xff0c;选择了1个接口&#xff0c;每次迭代中1个接口同时请求&#xff0c;迭代1000次&#xff08…...

决策树的生成与剪枝

决策树的生成与剪枝 决策树的生成生成决策树的过程决策树的生成算法 决策树的剪枝决策树的损失函数决策树的剪枝算法 代码 决策树的生成 生成决策树的过程 为了方便分析描述&#xff0c;我们对上节课中的训练样本进行编号&#xff0c;每个样本加一个ID值&#xff0c;如图所示…...

对象克隆与单例模式的实现

一、引言 在 C 编程中&#xff0c;对象克隆和单例模式是两个非常重要的概念。对象克隆可以帮助我们快速创建具有相同状态的对象副本&#xff0c;而单例模式则可以确保一个类只有一个实例&#xff0c;并提供全局访问点。本文将详细介绍 C 中如何实现对象的克隆以及单例模式。 …...

在 Linux 系统中,让 apt 使用 HTTP 代理

在 Linux 系统中&#xff0c;要让 apt 使用 HTTP 代理&#xff0c;有几种方法可以实现&#xff1a; ### 1. 临时设置代理 你可以通过设置环境变量来临时为 apt 命令设置代理。这种方法不需要修改任何配置文件&#xff0c;只需在命令行中设置环境变量即可。例如&#xff1a; …...

中国气象局:2024年第二批“气象数据要素×”典型案例(附下载)

11月25日&#xff0c;中国气象局通报2024年第二批“气象数据要素”典型案例。此次遴选充分结合首届“数据要素”大赛获奖案例&#xff0c;旨在进一步号召各级气象部门充分学习借鉴先进经验和做法&#xff0c;持续推动高价值气象数据产品开发利用&#xff0c;挖掘气象数据要素应…...

Android绘图Path基于LinearGradient线性渐变,Kotlin(1)

Android绘图Path基于LinearGradient线性渐变&#xff0c;Kotlin&#xff08;1&#xff09; import android.content.Context import android.graphics.Canvas import android.graphics.Color import android.graphics.LinearGradient import android.graphics.Paint import and…...

基础入门-APP应用微信小程序原生态开发H5+Vue技术WEB封装打包反编译抓包点

知识点&#xff1a; 1、基础入门-APP应用-开发架构安全问题 2、基础入门-小程序应用-开发架构安全问题 通用&#xff1a; 1、反编译-得到源码-源码提取资产&#xff08;泄漏的配置信息&#xff09;-安全测试 2、抓包-资产-安全测试 一、演示案例-移动App-开发架构-原生&H…...

vue+ts提交数据时不提交(剔除)某项数据

关键代码 // 假设这是原始要提交的数据数组 const dataArray [{areaConfId: ,areaName: ,cityInfo: [],provinceList: [],cityList: []} ];// 使用map方法遍历数组中的每个对象&#xff0c;通过解构赋值和对象展开运算符去除cityInfo字段 const newDataArray dataArray.map…...

乐凡信息智能安全管控方案:助力油气田行业安全管控多方位升级

我国油田地域广阔&#xff0c;分布着大量各种油井&#xff0c;油井开采设备的连续稳定运行是保证石油开采的首要条件。然而&#xff0c;由于油田多位于特殊地理环境中&#xff0c;因而实现油井之间的通信首要问题就是要克服地理环境所带来的限制&#xff0c;传统通信系统的建设…...

Jenkins搭建并与Harbor集成上传镜像

Jenkins介绍 Jenkins 是一个开源的自动化服务器&#xff0c;广泛用于持续集成&#xff08;CI&#xff09;和持续交付&#xff08;CD&#xff09;的实践中。它帮助开发人员自动化构建、测试和部署过程&#xff0c;从而提高开发效率、代码质量和项目交付速度。通过丰富的插件支持…...

FutureCompletableFuture实战

1. Callable&Future&FutureTask介绍 直接继承Thread或者实现Runnable接口都可以创建线程&#xff0c;但是这两种方法都有一个问题就是&#xff1a;没有返回值&#xff0c;也就是不能获取执行完的结果。因此java1.5就提供了Callable接口来实现这一场景&#xff0c;而Fu…...

Amazon与Shopee平台对比:跨境卖家如何选对平台打开市场?

在跨境电商领域&#xff0c;选择合适的平台对卖家能否成功打开市场至关重要。如今&#xff0c;Amazon和Shopee成为了众多卖家的热门选择。一个以全球化布局和高端市场著称&#xff0c;一个则专注东南亚新兴市场的潜力。两者各有优势&#xff0c;但也需要根据卖家的业务模式、目…...

【项目实战】redis实现websocket分布式消息推送服务

由于redis并非专业的MQ中间件&#xff0c;消息的防丢失策略并不完整&#xff0c;存在丢失消息的可能。该方案为在再pc web管理平台的右下角弹出&#xff0c;显示新接收到的消息数&#xff0c;哪怕没有收到这个通知&#xff0c;也可以自己在消息中心看看。所以对可靠性要求不高。…...

(自用)配置文件优先级、SpringBoot原理、Maven私服

配置优先级 之前介绍过SpringBoot中支持三类配置文件.properties、.yml和.yaml&#xff0c;他们三者之间也是有着优先级顺序的&#xff0c;为.properties➡.yml➡.yaml。 同时SpringBoot为了增强程序的拓展性&#xff0c;除了支持配置文件属性配置&#xff0c;还支持Java系统属…...

在windows系统中使用labelimg对图片进行标注之工具安装及简单使用

一.背景 还是之前的主题&#xff0c;使用开源软件为公司搭建安全管理平台&#xff0c;从视觉模型识别安全帽开始。我是从运行、训练、标注倒过来学习的。本次主要是学习标注工具labelimg的安装及简单使用。 二.下载 LabelImg是一款广受欢迎的开源图像标注工具&#xff0c;为计…...

数字图像处理技术期末复习

1. 已知图像的分辨率和深度&#xff0c;怎么求图像的存储空间&#xff08;位&#xff0c;字节&#xff0c;KB&#xff09;&#xff1f; 题目&#xff1a; 已知图像的分辨率和深度&#xff0c;怎么求图像的存储空间&#xff08;位&#xff0c;字节&#xff0c;KB&#xff09;&a…...

点云空洞的边界识别提取 pso-bp 神经网络的模型来修复点云空洞 附python代码

代码是一个Python程序,用于处理3D点云数据,特别是检测和修复点云中的孔洞区域。 1. **导入库**: - `numpy`:用于数学运算。 - `open3d`:用于处理3D数据和可视化。 - `torch`:PyTorch库,用于深度学习。 - `torch.nn`和`torch.optim`:PyTorch的神经网络和优…...

【AutoDL】通过【SSH远程连接】【vscode】

小帅碎碎念 0. 起因1. SSH信息获取2. 给你的vscode安装支持SSH远程连接的插件3. SSH远程连接入口4. 输入密码登陆5. 总结 0. 起因 之前使用AutoDL和Jupyter进行代码编辑和执行确实很方便&#xff0c;尤其是对于交互式数据分析项目。然而&#xff0c;也存在一些限制和不便之处&…...

ubuntu22.04编译安装Opencv4.8.0+Opencv-contrib4.8.0教程

本章教程,主要记录在Ubuntu22.04版本系统上编译安装安装Opencv4.8.0+Opencv-contrib4.8.0的具体过程。 一、下载opencv和opencv-contrib包 wget https://github.com/opencv/opencv/archive/refs/tags/4.8.0.zip wget https://github.com/opencv/opencv_contrib/archive/refs/…...

短链接服务

一 功能描述 1.短链接是将长连接转化为短连接使得链接变得美观清爽&#xff0c;让用户点击率更高&#xff0c;同时规避原始链接中一些关键词、域名屏蔽等问题&#xff0c;最终利用短链每次跳转都需要经过后端的特性&#xff0c;在跳转过程中做异步埋点&#xff0c;用于效果数据…...

【Vue3学习】setup语法糖中的ref,reactive,toRef,toRefs

在 Vue 3 的组合式 API&#xff08;Composition API&#xff09;中&#xff0c;ref、reactive、toRef 和 toRefs 是四个非常重要的工具函数&#xff0c;用于创建和管理响应式数据。 一、ref 用ref()包裹数据,返回的响应式引用对象&#xff0c;包含一个 .value 属性&#xff0…...

Halcon中dots_image(Operator)算子原理及应用详解

在HALCON中&#xff0c;dots_image算子是一个用于增强图像中圆点效果的强大工具&#xff0c;特别适合于点的分割&#xff0c;以及OCR&#xff08;光学字符识别&#xff09;应用程序中增强点状印刷字体。以下是对dots_image (ImageResult, DotImage, 5, ‘dark’, 2)算子原理及应…...

【C语言】库函数常见的陷阱与缺陷(四):内存内容操作函数[5]--memchr

C语言中的memchr函数用于在内存块中搜索一个特定的字符(实际上是unsigned char类型的值),并返回该字符第一次出现的指针。虽然这个函数在内存搜索中非常有用,但它也存在一些陷阱。 一、功能与用法 功能:memchr函数在指定的内存块中搜索第一次出现的特定字符,并返回一个…...

【P2P】【Go】采用go语言实现udp hole punching 打洞 传输速度测试 ping测试

服务器端 udpserver/main.go package mainimport ("fmt""net""sync""sync/atomic" )var (clientCounter uint64 0 // 客户端连接计数器mu sync.Mutex )func main() {addr, err : net.ResolveUDPAddr("udp", &q…...

【附源码】Electron Windows桌面壁纸开发中的 CommonJS 和 ES Module 引入问题以及 Webpack 如何处理这种兼容

背景 在尝试让 ChatGPT 自动开发一个桌面壁纸更改的功能时&#xff0c;发现引入了一个 wallpaper 库&#xff0c;这个库的入口文件是 index.js&#xff0c;但是 package.json 文件下的 type:"module"&#xff0c;这样造成了无论你使用 import from 还是 require&…...

【SpringBoot 调度任务】

在 Spring Boot 中实现调度任务&#xff08;Scheduled Tasks&#xff09;&#xff0c;通过使用 EnableScheduling 和 Scheduled 注解来完成。 添加依赖启用调度任务支持创建调度任务运行应用程序 添加依赖 pom.xml 文件中有以下依赖项&#xff1a; <dependency><gro…...

Android v4和v7冲突

android.useAndroidXtrue android.enableJetifiertruev4转成AndroidX...

【HarmonyOS之旅】HarmonyOS开发基础知识(一)

目录 1 -> 应用基础知识 1.1 -> 用户应用程序 1.2 -> 用户应用程序包结构 1.3 -> Ability 1.4 -> 库文件 1.5 -> 资源文件 1.6 -> 配置文件 1.7 -> pack.info 1.8 -> HAR 2 -> 配置文件简介 2.1 -> 配置文件的组成 3 -> 配置文…...

【排序算法】——插入排序

目录 前言 简介 基本思想 1.直接插入排序 2.希尔排序 代码实现 1.直接插入排序 2.希尔排序 总结 1.时空复杂度 2.稳定性 尾声 前言 排序(Sorting) 是计算机程序设计中的一种重要操作&#xff0c;它的功能是将一个数据元素&#xff08;或记录&#xff09;的任意序列&…...

Vue todoList小项目记录

最初代码 简单搭一个vue2的小项目 App.vue <template><div id"app"><!-- 容器 --><div class"todo-container"><div class"todo-wrap"><!-- 头部 --><MyHeader :addTodo"addTodo"></…...

SQL题目笔记

一、根据需求创建表&#xff08;设计合理的数据类型、长度)...

电脑开机提示error loading operating system怎么修复?

前一天电脑还能正常运行&#xff0c;但今天启动时却显示“Error loading operating system”&#xff08;加载操作系统错误&#xff09;。我已经仔细检查了硬盘、接线、内存、CPU和电源&#xff0c;确认这些硬件都没有问题。硬盘在其他电脑上可以正常使用&#xff0c;说明不是硬…...

Nginx 在不同操作系统下的安装指南

Nginx 在不同操作系统下的安装指南 一、Linux 系统下 Nginx 的安装 &#xff08;一&#xff09;基于 Ubuntu 系统 更新软件包列表 打开终端&#xff0c;首先执行sudo apt-get update命令。这一步是为了确保系统的软件包列表是最新的&#xff0c;能够获取到最新版本的 Nginx 及…...

景联文科技入选中国信通院发布的“人工智能数据标注产业图谱”

近日&#xff0c;由中国信息通信研究院、中国人工智能产业发展联盟牵头&#xff0c;联合中国电信集团、沈阳市数据局、保定高新区等70多家单位编制完成并发布《人工智能数据标注产业图谱》。景联文科技作为人工智能产业关键环节的代表企业&#xff0c;入选图谱中技术服务板块。…...

Nginx - 负载均衡及其配置(Balance)

一、概述 定义&#xff1a;在多个计算机&#xff08;计算机集群&#xff09;、网络连接、CPU、磁盘驱动器或其他资源中分配负载目标&#xff1a;最佳化资源使用、最大化吞吐率、最小化响应时间、避免过载功能&#xff1a;使用多台服务器提供单一服务&#xff08;服务器农场&am…...

MySQL存储引擎-存储结构

Innodb存储结构 Buffer Pool(缓冲池)&#xff1a;BP以Page页为单位&#xff0c;页默认大小16K&#xff0c;BP的底层采用链表数据结构管理Page。在InnoDB访问表记录和索引时会在Page页中缓存&#xff0c;以后使用可以减少磁盘IO操作&#xff0c;提升效率。 ○ Page根据状态可以分…...

数据资产入表 解锁智慧城市新潜力

在21世纪的科技浪潮中&#xff0c;智慧城市以信息技术为核心&#xff0c;以数据为血液&#xff0c;通过智能化、精细化的管理&#xff0c;让城市变得更加智慧、更加宜居。而数据资产入表&#xff0c;正是这一变革中的关键一环&#xff0c;它不仅推动了科技的进步&#xff0c;更…...

按类别调整目标检测标注框的写入顺序以优化人工审核效率

引言 在目标检测数据标注审核过程中&#xff0c;我们常常会遇到以下情况&#xff1a;某些小目标的检测框嵌套在大目标检测框内&#xff0c;而在模型进行预标注后&#xff0c;这些小目标的框可能被写入到了大目标框的下层。在人工审核阶段&#xff0c;标注审核人员需要手动移动…...

深入理解YOLO系列目标检测头的设定方式

目录 YOLOv1的检测头结构 1. 网络结构概述 2. 结构细节 3. 优缺点 YOLOv2的检测头结构 1. 网络结构概述 2. 结构细节 3. 优缺点 YOLOv3的检测头结构 1. 网络结构概述 2. 结构细节 3. 优缺点 总结&#xff1a;YOLO 系列检测头的结构演变 YOLOv1的检测头结构 1. 网络…...

智慧农业物联网解决方案:道品科技水肥一体化

在当今科技飞速发展的时代&#xff0c;农业也迎来了一场深刻的变革。智慧农业物联网解决方案中的水肥一体化技术&#xff0c;正逐渐成为现代农业发展的重要助推器。它不仅提高了农业生产效率&#xff0c;还实现了精准施肥和灌溉&#xff0c;为农业可持续发展带来了新的机遇。 …...

单片机上电后程序不运行怎么排查问题?

1.电源检查。使用电压表测量单片机的电源电压是否正常&#xff0c;确保电压在规定的范围内&#xff0c;如常见的5V。 2.复位检查。检查复位引脚的电压是否正常&#xff0c;在单片机接通电源时&#xff0c;复位引脚通常会有一个高电平&#xff0c;按下复位按钮时&#xff0c;复位…...

OceanBase 数据库分布式与集中式 能力

OceanBase分布式数据库与集中式数据库的差异 分布式数据库能解决金融行业最有挑战的高并发低延迟的核心交易系统的稳定性、扩展性、高性能问题。OB之所以一直强调分布式是说它具备很强的数据处理能力&#xff0c;当然从OB4.0开始也支持集中式了。 在实际业务场景中20%是分布式…...

C#多线程

C#中的多线程编程是开发高效并发应用程序的关键技术之一&#xff0c;它允许程序同时执行多个任务&#xff0c;从而提升应用程序的响应速度和性能。为了更好地理解C#中的多线程使用和定义&#xff0c;我们可以从以下几个方面来探讨&#xff1a;线程的基本概念、创建线程的方法、…...