uniapp使用uView的单选框自定义图片标题和副标题

news2024/9/21 2:40:02

效果图:

我这边是在一个弹框里面,需要一个单选框

实现代码:

html代码:

<u-popup :round="15" mode="center" :closeOnClickOverlay="false" bgColor="transparent">
  <view class="depositRequiredBox">
    <view class="topBox">
      <u-radio-group v-model="depositRequired" placement="column" iconPlacement="right" size="24" iconSize="18">
        <label class="label" v-for="(option, index) in radiolist1" :key="index">
          <image :src="option.icon" class="oneIcon"></image>
          <view class="titleBox">
            <view class="title">{{option.title}}</view>
            <view class="subtitle">{{option.subtitle}}</view>
          </view>
          <view class="radioBox">
            <u-radio :name="option.value"></u-radio>
          </view>
        </label>
      </u-radio-group>
    </view>
    <view class="bottomBox">
      <view class="btn center leftBtn">取消</view>
      <view class="btn center rightBtn">确定</view>
    </view>
  </view>
</u-popup>

js代码:

export default {
  data(){
    return {
      depositRequired:1,
      radiolist1: [{
		title: '信用免押',
		subtitle: '凭借芝麻信用最高可全免',
		value: 0,
		icon: '/static/order-list/water.png'
	  }, {
		title: '申请免押',
		subtitle: '极速免押',
		value: 1,
		icon: '/static/order-list/antChain.png'
	  }]
    }
  }
}

scss代码:

.center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.depositRequiredBox {
  width: 500rpx;
  height: 460rpx;
  border-radius: 15px;
  background-color: #FFFFFF;

  .topBox {
    width: 100%;
    height: 300rpx;
    margin-top: 30rpx;
    border-bottom: 1rpx solid #E5E5E5;

    .label {
      width: 90%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      padding: 10px 0;
      position: relative;

      .oneIcon {
        width: 70rpx;
        height: 70rpx;
      }

      .titleBox {
        margin-left: 10rpx;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .title {
          color: #000000;
          font-weight: bold;
          font-size: 32rpx;
        }

        .subtitle {
          font-size: 28rpx;
          color: #888;
        }
      }

      .radioBox {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
      }
    }
  }

  .bottomBox {
    width: 100%;
    height: 130rpx;
    display: flex;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    overflow: hidden;

    .btn {
      width: 50%;
      color: #575757;
      font-size: 26rpx;
      background-color: #FFFFFF;
    }

    .leftBtn {
      border-right: 1rpx solid #E5E5E5;
    }

    .rightBtn {
      border-left: 1rpx solid #E5E5E5;
    }

    .btn:active {
      background-color: #EEEEEE;
    }
  }
}

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

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

相关文章

水泥电阻在电源电路中的作用

水泥电阻是将电阻线绕在无碱性耐热瓷件上&#xff0c;外面加上耐热、耐湿及耐腐蚀之材料保护固定并把绕线电阻体放入方形瓷器框内&#xff0c;用特殊不燃性耐热水泥充填密封而成。水泥电阻的外侧主要是陶瓷材质&#xff08;一般可分为高铝瓷和长石瓷&#xff09;。 水泥电阻器…

navicat 17 安装

百度网盘 链接: https://pan.baidu.com/s/1nFFQzWhjxRUM_X6bVlWNGw?pwd8888 提取码: 8888 1.双击运行安装包 2.点击下一步 2.勾选我同意&#xff0c;点击下一步 3.自定义安装路径&#xff0c;点击下一步 4.注意勾选桌面快捷方式&#xff0c;点击下一步 5.点击安装 6.点击完…

游戏类型有哪些?游戏分类详细解说(二)

在游戏行业中&#xff0c;对游戏进行分类可以帮助玩家、开发者和市场分析师更好地理解市场趋势、玩家偏好和游戏设计元素。 游戏分类可以从多个维度进行&#xff0c;上一期跟大家分享了目前现有的游戏品类&#xff0c;本期跟大家分享具体游戏分类维度&#x1f447; 1、题材维度…

要抓住国际白银现货行情 以下这几点需要注意

国际白银现货行情最近表现不甚稳定&#xff0c;在七月上旬出现了比较强势的上涨&#xff0c;但随后出现强势的下跌&#xff0c;跌破了30关口。如果我们要抓住国际白银现货行情&#xff0c;那么以下这几点我们就需要注意。 一&#xff0c;建立交易计划&#xff0c;并且按计划执行…

Day1-软件包管理及shell命令

1. Linux介绍 1.1 Linux的发展 在Unix基础上发展而来 GNU GUN is Not Unix GPL General Public License 1.2 各种Linux发行版本 Red Hat Ubuntu 1.3 Linux体系结构 1.4命令终端 在桌面环境下的命令终端仿真器程序很多&#xff0c;它们各有特色&#xff0c;拥有各自的用户…

QT——常用的窗口相关知识点

1. 常用的窗口标志设置 设置窗口无标题栏 // 设置窗口无标题栏this->setWindowFlags(Qt::CustomizeWindowHint);设置窗口无边框 // 设置窗口无边框setWindowFlags(Qt::FramelessWindowHint);设置窗口置顶 // 设置窗口置顶setWindowFlags(Qt::FramelessWindowHint|Qt::Windo…

Harbor镜像仓库教程(单节点)

1.前置内容 1.1 harbor概述 众所周知&#xff0c;docker镜像仓库被墙了&#xff0c;所以部署我们私有环境内的Registry也是非常必要的。 Harbor是由VMware公司开源的企业级的Docker Registry管理项目&#xff0c;相比docker官方拥有更丰富的权限权利和完善的架构设计&#xff…

Linux笔记 --- 组合数据类型

结构体 简单的定义结构体的方法 struct student {char name;int age;float score; };//使用student模板创建两个结构体变量 struct student Jack,Rose; 结构体中可以存放除了函数以外的任何数据类型的数据&#xff0c;在创建结构体时student被称为结构体模板名称&#xff0c;…

CRM是什么?如何用CRM管理好客户?

在企业的销售运营中&#xff0c;客户是是贯穿始终的主体。客户的需求、偏好与满意度&#xff0c;指引着企业未来改变、优化的方向。而企业销售运营的核心&#xff0c;就是“客户至上”。 面对庞杂的客户信息&#xff0c;如何快速高效的进行客户管理呢&#xff1f;那就是要有一…

windows下在线预览服务kkFileView4.4.0问题记录

前几天找到一个开源项目&#xff1a;kkFileView&#xff0c;感觉可能以后可能会用到&#xff0c;所以尝试了下。 通过git下载下来&#xff0c;版本是4.4.0&#xff0c;通过idea打开项目&#xff0c;发现老是无法找到组件aspose-cad&#xff0c;版本是23.9. 找了好多文章&#x…

MyBatis-Plus是啥?有啥用?让 MyBatis 开发更简单、更高效!

让 MyBatis 开发更简单、更高效! 在当今快节奏的软件开发世界中,提高开发效率是每个程序员都追求的目标。而 MyBatis-Plus 则是一款能够帮助开发者在 MyBatis 项目中事半功倍的神奇工具。本文将为您深入探索 MyBatis-Plus 的核心特性和强大功能,助您在 MyBatis 开发之路上驰骋畅…

计算word文件打印页数 VBA实现

目录 场景复现环境说明实现原理计算当前文件夹下所有word文件页数总和利用递归计算当前文件夹所有work文件页面数量几个BUG计算结果软件报价后话 场景复现 最近需要帮我弟打印高考资料&#xff0c;搜集完资料去网上打印&#xff0c;商家发出了这个计算页数的界面。我就好奇怎么…

Robotaxi火了,中国智驾公司冲击全球无人车第一股

作者 |芦苇 编辑 |德新 全球Robotaxi第一股要来了&#xff0c;中国的文远知行可能比Waymo、Cruise更早上市。 7月末&#xff0c;文远知行向美国SEC提交招股书&#xff0c;此次发行由摩根士丹利、摩根大通及中金公司牵头&#xff0c;股票代码「WRD」。 作为全球第一家上市的R…

React 学习——路由跳转(Link、useNavigate)、跳转时传递参数(问号传递、path中冒号拼接)

需要四个页面&#xff1a;项目入口index.js文件&#xff0c;router配置路由跳转文件&#xff0c;article组件页面&#xff0c;login组件页面 1、项目入口index.js文件 注意&#xff1a;要安装这个依赖 react-router-dom import React from react import { createRoot } fro…

啥是RLFH标注、SFT标注、RM标注?一篇文章让你系统了解大模型标注

标注猿的第80篇原创 一个用数据视角看AI世界的标注猿 大家好&#xff0c;我是AI数据标注猿刘吉&#xff0c;一个用数据视角看AI世界的标注猿。 世界人工智能大会过后&#xff0c;感觉市场都变得热闹了起来呢&#xff0c;就连社区群里也变得热闹了&#xff0c;从找标注项…

深入浅出,大模型的规模与训练成本揭秘

导读 大模型是近几年非常火的一个AI名词&#xff0c;很多公司也在训练自己的大模型&#xff0c;但是训练一个大模型需要多少钱呢&#xff1f;本文从多个角度为大家拆解。 Title: Visualizing the size of Large Language Models Paper: https://medium.com/georgeanil/visuali…

学会这个Python库,接口测试so easy

前言 我们在做接口测试时&#xff0c;大多数返回的都是json属性&#xff0c;我们需要通过接口返回的json提取出来对应的值&#xff0c;然后进行做断言或者提取想要的值供下一个接口进行使用。 但是如果返回的json数据嵌套了很多层&#xff0c;通过查找需要的词&#xff0c;就…

【IEEE出版 | 高录用率 | 快速检索 | 有ISBN号!】2024年智能计算与数据挖掘国际学术会议 (ICDM 2024,9月20-22)

智能计算与数据挖掘是当今信息技术领域的研究热点&#xff0c;并在众多领域都有着广泛的应用&#xff0c;如金融、医疗、教育、交通等。随着大数据时代数据量爆炸式增长&#xff0c;如何从海量数据中提取有价值的信息&#xff0c;一直是需要迭代解决的问题。 2024年智能计算与…

Ampere推出512核AmpereOne Aurora处理器-定制AI引擎,支持HBM内存

随着各超大规模云服务商和主要云基础设施构建商纷纷设计自己的CPU和AI加速器&#xff0c;这让那些向他们销售计算引擎的厂商感受到了巨大压力。这其中不仅包括英特尔、AMD和英伟达&#xff0c;还包括Arm服务器芯片领域的新秀Ampere Computing&#xff0c;Ampere Computing与Int…