uniapp 微信小程序 功能入口

devtools/2024/12/23 8:40:11/

单行单独展示

效果图

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.ppmy.cn/devtools/144637.html

相关文章

flink集群搭建 详细教程

一、环境准备 1、准备三台服务器 三台服务器ip 115.120.227.194 jobmanger 123.60.154.232 taskmanger 36.111.173.249 taskmanger 2、给三台主机分别配置主机名 #第一台机器 hostnamectl set-hostname hadoop01#第二台机器 hostnamectl set-hostname hadoop02#第三台…

iClient3D for Cesium 实现限高分析

作者&#xff1a;gaogy 1、背景 随着地理信息技术的发展&#xff0c;三维地球技术逐渐成为了许多领域中的核心工具&#xff0c;尤其是在城市规划、环境监测、航空航天以及军事领域。三维地图和场景的应用正在帮助人们更加直观地理解空间数据&#xff0c;提供更高效的决策支持。…

入侵他人电脑,实现远程控制(待补充)

待补充 在获取他人无线网网络密码后&#xff0c;进一步的操作是实现入侵他人电脑&#xff0c;这一步需要获取对方的IP地址并需要制作自己的代码工具自动化的开启或者打开对方的远程访问权限。 1、获取IP地址&#xff08;通过伪造的网页、伪造的Windows窗口、hook&#xff0c;信…

零基础微信小程序开发——小程序的宿主环境(保姆级教程+超详细)

&#x1f3a5; 作者简介&#xff1a; CSDN\阿里云\腾讯云\华为云开发社区优质创作者&#xff0c;专注分享大数据、Python、数据库、人工智能等领域的优质内容 &#x1f338;个人主页&#xff1a; 长风清留杨的博客 &#x1f343;形式准则&#xff1a; 无论成就大小&#xff0c;…

redis开发与运维-redis02-redis数据类型与命令总结

文章目录 【README】【1】redis通用命令与数据结构【1.1】通用命令【1.2】数据结构与内部编码【1.3】redis单线程架构【1.3.1】redis单线程优缺点 【2】字符串&#xff08;值的类型为字符串&#xff09;【2.1】常用命令【2.1.1】设置值【2.1.2】获取值【2.1.3】批量设置值【2.1…

AI应用-本地模型实现AI生成PPT(简易版)

文章目录 前言技术栈效果展示 一、实现思路二、实现步骤1.本地安装marp-cli2.后端实现3.前端实现 三、代码地址及说明 前言 在许多项目中&#xff0c;生成 PPT 是常见的需求&#xff0c;尤其在教育和报告展示中。传统的生成 PPT 的方法需要手动创建&#xff0c;而使用生成模型…

支付域——清结算系统体系

摘要 本文深入探讨了支付清算的基础知识和跨机构清算原理&#xff0c;涵盖了组织、账户、支付工具和系统的基础&#xff0c;支付流程的模型&#xff0c;以及支付清算的全局实现。文章还详细介绍了支付机构的五大业务和支付系统的总架构&#xff0c;并通过案例分析了支付清算的…

【原生js案例】移动端如何实现页面的入场和出场动画

好的css动画&#xff0c;能给用户体验带来很大的提升&#xff0c;同时也能增加app的趣味性&#xff0c;给人眼前一亮的感觉。那如何实现这种全屏的弹窗入场和退场的动画 实现效果 代码实现 UI样式美化 #musicDetails{width: 100%;height: 100%;top:0;left:0;position: absol…