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;}}

有需求可自行修改

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

苍穹外卖-day05redis 缓存的学习

苍穹外卖-day05 课程内容 Redis入门Redis数据类型Redis常用命令在Java中操作Redis店铺营业状态设置 学习目标 了解Redis的作用和安装过程 掌握Redis常用的数据类型 掌握Redis常用命令的使用 能够使用Spring Data Redis相关API操作Redis 能够开发店铺营业状态功能代码 功能实…

Linux之系统管理

一、相关命令 筛选 grep&#xff0c;可以用来进行筛选&#xff0c;例如对目录筛选课写成 # 过滤出带serv的 ls /usr/sbin | grep serv2. 对服务的操作 2.1 centos6版本 service 服务名 start|stop|restart|status # start&#xff1a;开启 # stop&#xff1a;停止 # restart…

什么?Flutter 可能会被 SwiftUI/ArkUI 化?全新的 Flutter Roadmap

在刚刚过去的 FlutterInProduction 活动里&#xff0c;Flutter 官方除了介绍「历史进程」和「用户案例」之外&#xff0c;也着重提及了未来相关的 roadmap &#xff0c;其中就有 3.27 里的 Swift Package Manager 、 Widget 实时预览 和 Dart 与 native 平台原生语言直接互操作…

Unity录屏插件-使用Recorder录制视频

目录 1.Recorder的下载 2.Recorder面板 2.1常规录制属性 2.2录制器配置 2.2.1添加录制器 2.2.2配置Input属性 2.2.3配置 Output Format 属性 2.2.4配置 Output File 属性 3.Recorder的使用 3.1录制Game View视频 3.1.1Recorder配置与场景搭建 3.1.2开始录制 3.1.3…

Android Vendor Overlay机制

背景介绍&#xff1a; 看Android 15版本更新时&#xff0c;"Android 15 deprecates vendor overlay"。 猜想这个vendor overlay是之前用过的settings overlay&#xff0c; 不过具体是怎么回事呢&#xff1f; 目录 Vendor Overlay介绍 Vendor Overlay工作原理 Ven…

Python 绘图魔法:用turtle库开启你的编程艺术之旅

&#x1f3e0;大家好&#xff0c;我是Yui_&#xff0c;目标成为全栈工程师~&#x1f4ac; &#x1f351;如果文章知识点有错误的地方&#xff0c;请指正&#xff01;和大家一起学习&#xff0c;一起进步&#x1f440; &#x1f680;如有不懂&#xff0c;可以随时向我提问&#…

AI开发:使用支持向量机(SVM)进行文本情感分析训练 - Python

支持向量机是AI开发中最常见的一种算法。之前我们已经一起初步了解了它的概念和应用&#xff0c;今天我们用它来进行一次文本情感分析训练。 一、概念温习 支持向量机&#xff08;SVM&#xff09;是一种监督学习算法&#xff0c;广泛用于分类和回归问题。 它的核心思想是通过…

.net core在linux导出excel,System.Drawing.Common is not supported on this platform

使用框架 .NET7 导出组件 Aspose.Cells for .NET 5.3.1 asp.net core mvc 如果使用Aspose.Cells导出excel时&#xff0c;报错 &#xff1a; System.Drawing.Common is not supported on this platform 平台特定实现&#xff1a; 对于Windows平台&#xff0c;System.Drawing.C…

【Unity3D】实现可视化链式结构数据(节点数据)

关键词&#xff1a;UnityEditor、可视化节点编辑、Unity编辑器自定义窗口工具 使用Newtonsoft.Json、UnityEditor相关接口实现 主要代码&#xff1a; Handles.DrawBezier(起点&#xff0c;终点&#xff0c;起点切线向量&#xff0c;终点切线向量&#xff0c;颜色&#xff0c;n…

6UCPCI板卡设计方案:8-基于双TMS320C6678 + XC7K420T的6U CPCI Express高速数据处理平台

基于双TMS320C6678 XC7K420T的6U CPCI Express高速数据处理平台 1、板卡概述 板卡由我公司自主研发&#xff0c;基于6UCPCI架构&#xff0c;处理板包含双片TI DSP TMS320C6678芯片&#xff1b;一片Xilinx公司FPGA XC7K420T-1FFG1156 芯片&#xff1b;六个千兆网口&#xff…

Python + 深度学习从 0 到 1(01 / 99)

希望对你有帮助呀&#xff01;&#xff01;&#x1f49c;&#x1f49c; 如有更好理解的思路&#xff0c;欢迎大家留言补充 ~ 一起加油叭 &#x1f4a6; 欢迎关注、订阅专栏 【深度学习从 0 到 1】谢谢你的支持&#xff01; ⭐ 深度学习之前&#xff1a;机器学习简史 什么要了解…

丹摩|丹摩助力selenium实现大麦网抢票

丹摩&#xff5c;丹摩助力selenium实现大麦网抢票 声明&#xff1a;非广告&#xff0c;为用户体验 1.引言 在人工智能飞速发展的今天&#xff0c;丹摩智算平台&#xff08;DAMODEL&#xff09;以其卓越的AI算力服务脱颖而出&#xff0c;为开发者提供了一个简化AI开发流程的强…

企业内训|高智能数据构建、Agent研发及AI测评技术内训-吉林省某汽车厂商

吉林省某汽车厂商为提升员工在AI大模型技术方面的知识和实践能力&#xff0c;举办本次为期8天的综合培训课程。本课程分为两大部分&#xff1a;面向全体团队成员的AI大模型技术结构与行业应用&#xff0c;以及针对技术团队的高智能数据构建与Agent研发。课程内容涵盖非结构化数…

LLaMA-Factory 单卡3080*2 deepspeed zero3 微调Qwen2.5-7B-Instruct

环境安装 git clone https://gitcode.com/gh_mirrors/ll/LLaMA-Factory.gitcd LLaMA-Factorypip install -e ".[torch,metrics]"pip install deepspeed 下载模型 pip install modelscope modelscope download --model Qwen/Qwen2.5-7B-Instruct --local_dir /roo…

uniapp blob格式转换为video .mp4文件使用ffmpeg工具

前言 介绍一下这三种对象使用场景 您前端一旦涉及到文件或图片上传Q到服务器&#xff0c;就势必离不了 Blob/File /base64 三种主流的类型它们之间 互转 也成了常态 Blob - FileBlob -Base64Base64 - BlobFile-Base64Base64 _ File uniapp 上传文件 现在已获取到了blob格式的…

【Rabbitmq篇】RabbitMQ⾼级特性----持久性,发送⽅确认,重试机制

目录 一.持久化 1 .交换机持久化 2 队列持久化 3.消息持久化 测试场景 二.发送⽅确认 1 .confirm确认模式 2 return退回模式 如何保证RabbitMQ消息的可靠传输&#xff1f;&#xff08;面试重点&#xff09; 三. 重试机制 一.持久化 我们在前⾯讲了消费端处理消息时,…

深度学习之目标检测——RCNN

Selective Search 背景:事先不知道需要检测哪个类别,且候选目标存在层级关系与尺度关系 常规解决方法&#xff1a;穷举法&#xff0c;在原始图片上进行不同尺度不同大小的滑窗&#xff0c;获取每个可能的位置 弊端&#xff1a;计算量大&#xff0c;且尺度不能兼顾 Selective …

Flutter环境搭建

1.Flutter 简介 1.1 Flutter 是什么 &#xff1f; Flutter 是一个 UI SDK&#xff08;Software Development Kit&#xff09;跨平台解决方案&#xff1a;可以实现一套代码发布移动端&#xff08;iOS、Android、HarmonyOS&#xff09;、Web端、桌面端目前很多公司都在用它&…

安全算法基础(一)

安全算法是算法的分支之一&#xff0c;还的依靠大量的数学基础进行计算&#xff0c;本文参照兜哥的AI安全样本对抗&#xff0c;做一个简单的算法安全概括&#xff0c;从零学习。 最新的安全算法对于我们常规的攻击样本检测&#xff0c;效果是不理想的&#xff0c;为了探究其原…

单元测试-Unittest框架实践

文章目录 1.Unittest简介1.1 自动化测试用例编写步骤1.2 相关概念1.3 用例编写规则1.4 断言方法 2.示例2.1 业务代码2.2 编写测试用例2.3 生成报告2.3.1 方法12.3.2 方法2 1.Unittest简介 Unittest是Python自带的单元测试框架&#xff0c;适用于&#xff1a;单元测试、Web自动…