【样式】默认都不选

news2024/9/21 12:45:52

在这里插入图片描述
在这里插入图片描述在这里插入图片描述在这里插入图片描述

html

<view class="u-flex u-m-t-32  u-m-b-24 u-f-s-24">
		<view class="u-flex" @click="navFun(1)">
			<text>佣金率</text>
			<image src="@/static/img/pai1.png" mode="" class="u-w-28 u-h-32" v-if="type1 == 1"></image>
			<image src="@/static/img/pai2.png" mode="" class="u-w-28 u-h-32" v-if="type1 == 2"></image>
			<image src="@/static/img/pai3.png" mode="" class="u-w-28 u-h-32" v-if="type1 == 3"></image>
		</view>
		<view class="u-flex u-m-l-32" @click="navFun(2)">
			<text>更新时间</text>
			<image src="@/static/img/pai1.png" mode="" class="u-w-28 u-h-32" v-if="type2 == 1"></image>
			<image src="@/static/img/pai2.png" mode="" class="u-w-28 u-h-32" v-if="type2 == 2"></image>
			<image src="@/static/img/pai3.png" mode="" class="u-w-28 u-h-32" v-if="type2 == 3"></image>
		</view>
	</view>

js

<script>
	export default {
		components: {},
		data() {
			return {
				type1:1,
				type2:1
			}
		},
		filters:{
			//取截单元,单位
			moneyFormat:function(arg){
				if(arg.toString().length>=4){
					const moneys = arg/10000
					const realVal = parseFloat(moneys).toFixed(2);
					return realVal+"w"
				}else {
					return arg
				}
			},
		},
		methods:{
			// num 1佣金率 2更新时间
			navFun(num){
				if(num == 1){
					this.type2 = 1;
					if(this.type1 == 1){
						this.type1 = 2
					}else if(this.type1 == 2){
						this.type1 = 3
					} else if(this.type1 == 3){
						this.type1 = 2
					}
				} else {
					this.type1 = 1;
					if(this.type2 == 1){
						this.type2 = 2
					}else if(this.type2 == 2){
						this.type2 = 3
					} else if(this.type2 == 3){
						this.type2 = 2
					}
				}
			},
			
		},
	}
</script>
<style lang='scss' scoped>
	.u-flex-center, .flex_align_center, .u-flex{
		display: flex;
		align-items: center;
	}
	.u-m-t-32{
		margin-top:32rpx;
	}
	.u-m-b-24{
		margin-bottom:32rpx;
	}
	.u-w-28{
		width:28rpx;
	}
	.u-h-28{
		height:28rpx;
	}
	.u-m-l-32{
		margin-left:32rpx;
	}
</style>

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

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

相关文章

RabbitMQ 教程 | 第7章 RabbitMQ 运维

&#x1f468;&#x1f3fb;‍&#x1f4bb; 热爱摄影的程序员 &#x1f468;&#x1f3fb;‍&#x1f3a8; 喜欢编码的设计师 &#x1f9d5;&#x1f3fb; 擅长设计的剪辑师 &#x1f9d1;&#x1f3fb;‍&#x1f3eb; 一位高冷无情的编码爱好者 大家好&#xff0c;我是 DevO…

P7883 平面最近点对(加强加强版)

题目 思路 一眼二分&#xff0c;把平面分成两部分&#xff0c;查左右两边&#xff0c;但是还有可能跨中间的线&#xff0c;所以这个也得判 代码 #include<bits/stdc.h> using namespace std; #define int long long const int maxn4e510; pair<int,int> a[maxn]…

Java版Spring Cloud+Spring Boot+Mybatis+uniapp知识付费平台讲解+免费搭建 qt

&#xfeff;Java版知识付费源码 Spring CloudSpring BootMybatisuniapp前后端分离实现知识付费平台 提供职业教育、企业培训、知识付费系统搭建服务。系统功能包含&#xff1a;录播课、直播课、题库、营销、公司组织架构、员工入职培训等。 提供私有化部署&#xff0c;免费售…

亚马逊云科技HPC解决方案,帮助浙江大学实现成本和科研任务的双丰收

浙江大学土壤学科是朱祖祥院士等几代土壤科学家共同创建的A国家重点学科&#xff0c;整体实力雄厚&#xff0c;优势特色明显&#xff0c;总体水平居国内前列。在亚马逊云科技科研创新支持计划&#xff08;Amazon Web Services Cloud Credits for Research&#xff09;的多次支持…

发掘JavaScript潜力:掌握高级技巧,成为JavaScript编程大师!

&#x1f3ac; 岸边的风&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! &#x1f4da; 前言 众所周知&#xff0c;JavaScript 是一种非常流行&#x1f525;的编程语言&#xff0c;它已经成为了网…

3000字详解:风控核心岗位及核心价值

01、信贷场景中所谓风控是什么&#xff1f; 从一个小故事说起&#xff1a; “风控是什么&#xff1f;” “你走过大桥么&#xff1f;” “桥上有栏杆么&#xff1f;” “有” “你过桥时会扶栏杆么” “一般不扶” “那栏杆是不是没必要有呢” “那还是得有啊&#xf…

SpringBoot统一功能处理(AOP思想实现)(统一用户登录权限验证 / 异常处理 / 数据格式返回)

主要是三个处理&#xff1a; 1、统一用户登录权限验证&#xff1b; 2、统一异常处理&#xff1b; 3、统一数据格式返回。 目录 一、用户登录权限校验 &#x1f345; 1、使用拦截器 &#x1f388; 1.1自定义拦截器 &#x1f388; 1.2 设置自定义拦截器 &#x1f388;创建cont…

vue3中使用原始标签制作一个拖拽和点击上传组件上传成功后展示

在Vue3中&#xff0c;可以使用<input type"file">标签来实现上传文件的功能&#xff0c;同时可以通过<div>标签来实现拖拽上传的功能。 首先&#xff0c;在template中定义一个包含<input>和<div>标签的组件&#xff1a; <template>&…

使用Vscode编辑keil工程

一、需要安装的插件 1. Keil Assistant 2. C/C 3. 中文配置&#xff1a; 二、插件配置 1. Keil Assistant 添加Keil的安装路径 接下来就可以使用vscode编辑Keil的工程了&#xff0c;调试编译和下载程序需要返回到Keil中进行操作。 三、Vscode常用快捷键 可以自定义进行配置…

【Unity实用插件篇】| 学会使用 可编程瓦片Tile Map,快速搭建2D地图

前言【Unity 实用插件篇】| 学会使用 可编程瓦片Tile Map,快速搭建2D地图一、导入 Tile Map Editor二、创建调色板 Tile Palette三、快速绘制地图四、TilePalette 调色板功能介绍五、TileMap 相关组件属性介绍GirdTilemapTilemap Renderer 瓦片地图渲染器Tile Assets 瓦片资源…

如何创建百度百科词条?教你如何在百度百科上创建个人专业词条

百度百科是一个拥有海量内容的知识库&#xff0c;每天有数百万人访问该网站以获取有用的信息和知识。如果您是一家企业、一位专业人士或学者&#xff0c;那么在百度百科上创建一个词条是一个很好的品牌推广或个人形象塑造的机会。在本文中&#xff0c;一秒推小编将讲述如何创建…

安防视频综合管理合平台EasyCVR可支持的视频播放协议有哪些?

EasyDarwin开源流媒体视频EasyCVR安防监控平台可提供视频监控直播、云端录像、云存储、录像检索与回看、智能告警、平台级联、云台控制、语音对讲、智能分析等能力。 视频监控综合管理平台EasyCVR具备视频融合能力&#xff0c;平台基于云边端一体化架构&#xff0c;具有强大的…

JVM基础篇-方法区与运行时常量池

JVM基础篇-方法区与运行时常量池 方法区 Java 虚拟机有一个在所有 Java 虚拟机线程之间共享的方法区。方法区类似于传统语言的编译代码的存储区或者类似于操作系统进程中的“文本”段。它存储每个类的结构&#xff0c;例如运行时常量池、字段和方法数据&#xff0c;以及方法和…

图像处理库(Opencv, Matplotlib, PIL)以及三者之间的转换

文章目录 1. Opencv2. Matplotlib3. PIL4. 三者的区别和相互转换5. Torchvision 中的相关转换库5.1 ToPILImage([mode])5.2 ToTensor5.3 PILToTensor 1. Opencv opencv的基本图像类型可以和numpy数组相互转化&#xff0c;因此可以直接调用torch.from_numpy(img) 将图像转换成t…

Sql server 2005 卸载之后重新安装

Sql server 2005 卸载之后重新安装 Sql sercer 2005在重新安装之前先要进行卸载操作&#xff0c;由于Sql sercer 2005组件都是分散的&#xff0c;所以卸载时要找到对应的位置一个一个卸载&#xff0c;不卸载干净的情况下再次安装时会出现很多问题&#xff0c;导致安装失败。这…

KubeSphere部署芋道源码ruoyi-vue-pro

KubeSphere环境准备 新建企业空间 新建项目 创建harbor镜像服务信息 新建DevOps 项目 创建git,harbor,kubeconfig凭证 中间件部署 MySQL8部署redis6部署 后端部署 修改pom.xml <!-- pom.xml添加内容&#xff1a;--> <profiles><!-- 本地环境 --><pro…

《当今奇人周兴和》励志小说连载之三 ● 饥饿寒冷童年梦

饥饿寒冷童年梦 Hungry and cold childhood 兴和至今也记得&#xff0c;这年冬天特别冷。 Xinghe still remembers that the winter was particularly cold in that year. 那一天&#xff0c;放了学的小兴和背着书兜&#xff0c;又冷又饿地从毛公乡小学出来&#xff0c;艰难…

渠道控价的常见方法

品牌渠道一般分为线上和线下&#xff0c;现在常见要治理的渠道一般指的是线上&#xff0c;因为线上渠道数据变化快&#xff0c;价格波动也很大&#xff0c;促销信息有很多&#xff0c;如果遇到大促&#xff0c;涉及的价格变化将会更明显&#xff0c;所以线上渠道是非常值得控价…

OA办公自动化系统设计与实现(论文+源码)_kaic

摘要 随着信息化建设的日益深入&#xff0c;无论是政府还是企事业单位&#xff0c;部门之间的信息沟通与协调工作越来越重要。人们迫切需要一个能充分利用网络优势&#xff0c;并可以管理企业的各种重要信息的软件平台&#xff0c;利用该平台快速建立自己的信息网络和办公管理系…

华为PMS API client token auth failed

对接华为pms时出现问题&#xff0c;提示华为PMS API client token auth failed 主要是权限的问题&#xff0c;创建项目的时候选择N/A