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

uniapp 日常业务 随便写写 源码


现成的组件 直接用

<template><view style="margin: 10rpx;"><view class="tea-header"><text class="tea-title">礼尚往来</text><view class="tea-view-all"><text>查看全部</text><text>></text></view></view><view style="display: flex;justify-content: center;align-content: center;"><NavBar :navItems="myNavItems" :text_padding="12" :fontSize="30" :dynamicHeight="8" :indicatorWidth="64"@item-selected="onItemSelected" /></view><view class="content-wrapper" style="position: relative; overflow: hidden;"><view v-for="(vla, i) in products" :key="i" :class="['content-page', getPageClass(i)]"><!-- 左边轮播图 --><view class="left-container"><swiper class="swiper-container" indicator-dots="true" indicator-active-color="#ffffff"indicator-color="#fff9" autoplay="true" interval="3000" circular="true"><swiper-item v-for="(item, index) in vla.bannerImages" :key="index"><image class="swiper-image" mode="aspectFill" :src="item.src" /></swiper-item></swiper></view><!-- 右边商品网格 --><view class="right-container"><view class="product-item" v-for="(item, index) in vla.list" :key="index"><image class="product-image" :src="item.image" mode="aspectFill" /><view style="display: flex;align-items: flex-start; flex-direction: column; "><text class="product-title" style="">{{ item.title }}</text><text class="product-price">{{ item.price }}</text></view></view></view></view></view></view>
</template><script>
import NavBar from './components/xztdemoNavBar.vue'export default {components: {NavBar},data() {return {myNavItems: ['关怀领导', '探望长辈', '关爱女性', '男性健康', '关爱儿童',],selectedIndex: 0,products: [{bannerImages: [{src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',},{src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',},{src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960'}],list: [{image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',title: '人参灵芝胶囊',price: '¥798.00'},{image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',title: 'KMax康麦斯',price: '¥698.00'},{image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',title: '海参礼盒',price: '¥1798.00'},{image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',title: '虫草',price: '¥798.00'},]},{bannerImages: [{src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',},{src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',},{src: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960'}],list: [{image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',title: '人参灵芝胶囊1232123',price: '¥798.00'},{image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',title: 'KMax康麦斯3333',price: '¥698.00'},{image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',title: '海参礼盒12132',price: '¥1798.00'},{image: 'http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960',title: '虫草123',price: '¥798.00'},]},]}},methods: {onItemSelected(index) {this.selectedIndex = index;},getPageClass(index) {if (index === this.selectedIndex) {return 'active';} else if (index < this.selectedIndex) {return 'left';} else {return 'right';}}}
}
</script><style>
.tea-header {display: flex;justify-content: space-between;align-items: center;padding: 15rpx 20rpx;
}.tea-title {font-size: 32rpx;font-weight: bold;font-family: PingFang SC, PingFang SC;
}.tea-view-all {color: #6E6E6E;font-size: 24rpx;
}.content-wrapper {height: 300px; /* 根据需要调整高度 */
}.content-page {position: absolute;width: 100%;height: 100%;top: 0;left: 0;transition: all 0.3s ease;opacity: 0;transform: translateX(100%);display: flex;
}.content-page.active {opacity: 1;transform: translateX(0);
}.content-page.left {transform: translateX(-100%);
}.content-page.right {transform: translateX(100%);
}.left-container {flex: 1;height: 100%;margin-right: 10px;
}.swiper-container {width: 100%;height: 100%;
}.swiper-image {width: 100%;height: 100%;border-radius: 10px;transform: scaleX(-1);object-fit: cover;
}.right-container {flex: 1;display: grid;grid-template-columns: 1fr 1fr;gap: 5px;
}.product-item {display: flex;flex-direction: column;background-color: #fff;border-radius: 10px;/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}.product-image {width: 100%;height: 100px;object-fit: cover;border-radius: 10px;margin-bottom: 5px;
}.product-title {font-size: 14px;color: #333;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 6em;/* 估算一个宽度,大约5个字 */
}.product-price {font-size: 16px;color: #FF6A22;
}
</style>

相关文章:

uniapp 日常业务 随便写写 源码

现成的组件 直接用 <template><view style"margin: 10rpx;"><view class"tea-header"><text class"tea-title">礼尚往来</text><view class"tea-view-all"><text>查看全部</text>&l…...

【软件测试】单元测试20套练习题

&#xff08;一&#xff09;概述 使用Java语言编写应用程序&#xff0c;设计测试数据&#xff0c;完成指定要求的白盒测试&#xff0c;对测试数据及相应测试结果进行界面截图&#xff0c;将代码以及相关截图粘贴到白盒测试报告中。 &#xff08;二&#xff09;题目要求...

8.16 day bug

bug1 题目没看仔细 额外知识 在 Bash shell 中&#xff0c;! 符号用于历史扩展功能。当你在命令行中输入 ! 后跟一些文本时&#xff0c;Bash 会尝试从你的命令历史中查找与该文本相匹配的命令。这是一种快速重用之前执行过的命令的方法。 如何使用历史扩展 基本用法: !strin…...

《Nginx核心技术》第11章:实现MySQL数据库的负载均衡

作者&#xff1a;冰河 星球&#xff1a;http://m6z.cn/6aeFbs 博客&#xff1a;https://binghe.gitcode.host 文章汇总&#xff1a;https://binghe.gitcode.host/md/all/all.html 星球项目地址&#xff1a;https://binghe.gitcode.host/md/zsxq/introduce.html 沉淀&#xff0c…...

使用 Gnosis Safe 创建多签名钱包

创建多签名钱包可以通过多个步骤完成,具体取决于你使用的平台或工具。下面我将介绍使用 Gnosis Safe 创建多签名钱包的过程,因为它是目前以太坊生态中最受欢迎且功能强大的多签名钱包之一。 目录 使用 Gnosis Safe 创建多签名钱包1. 准备工作2. 访问 Gnosis Safe3. 创建多签名…...

LeetCode 算法:前 K 个高频元素 c++

原题链接&#x1f517;&#xff1a;前 K 个高频元素 难度&#xff1a;中等⭐️⭐️ 题目 给你一个整数数组 nums 和一个整数 k &#xff0c;请你返回其中出现频率前 k 高的元素。你可以按 任意顺序 返回答案。 示例 1: 输入: nums [1,1,1,2,2,3], k 2 输出: [1,2] 示例 2…...

MySQL的SQL语句更新某个字段的值在原来值的基础上随机增加100~600

要在 MySQL 中更新某个字段的值&#xff0c;使其在原有值的基础上随机增加一个 100 到 600 之间的值&#xff0c;你可以使用 RAND() 函数来生成随机数&#xff0c;并结合其他 SQL 函数进行计算。以下是一个 SQL 更新语句的示例&#xff1a; UPDATE your_table_name SET your…...

LeetCode --- 410周赛

题目列表 3248. 矩阵中的蛇 3249. 统计好节点的数目 3250. 单调数组对的数目 I 3251. 单调数组对的数目 II 一、矩阵中的蛇 只要按照题目要求模拟即可&#xff0c;代码如下 class Solution { public:int finalPositionOfSnake(int n, vector<string>& commands…...

最佳的iPhone解锁软件和应用程序

在探讨最佳的iPhone解锁软件和应用程序时&#xff0c;我们需要考虑多个方面&#xff0c;包括软件的解锁能力、易用性、安全性、兼容性以及用户评价等。以下是对当前市场上几款优秀iPhone解锁软件和应用程序的详细分析&#xff0c;旨在为用户提供全面而深入的指导。 一、奇客iO…...

初等函数和它的表达式

常量函数&#xff0c;幂函数&#xff0c;指数函数&#xff0c;对数函数&#xff0c;三角函数和反三角函数成为基本初等函数。基本初等函数经过有限四则运算和符合运算得到的函数称为初等函数。 1. 常量函数 表达式&#xff1a; &#xff08;其中 c 是常数&#xff09;参数的意…...

Android 12系统源码_多屏幕(二)模拟辅助设备功能开关实现原理

前言 上一篇我们通过为Android系统开启模拟辅助设备功能开关&#xff0c;最终实现了将一个Activity显示到多个屏幕的效果。 本篇文章我们具体来分析一下当我们开启模拟辅助设备功能开关的时候&#xff0c;Android系统做了什么哪些操作。 一、模拟辅助设备功能开关应用位置 …...

【Go语言初探】(二)、项目文件结构和GOPATH设置

一、go语言项目文件结构 由go/bin、go/src和go/pkg三个子文件夹组成&#xff0c;见下图&#xff1a; 实际项目&#xff1a; 二、gopath路径变量设置 在项目中创建main.go文件后&#xff0c;IDE会提示设置GOPATH路径&#xff1a; 点击“configure GOPATH”&#xff0c;设置GOP…...

三种简单排序:插入排序、冒泡排序与选择排序 【算法 05】

三种简单排序&#xff1a;插入排序、冒泡排序与选择排序 在编程中&#xff0c;排序算法是基础且重要的知识点。虽然在实际开发中&#xff0c;我们可能会直接使用标准库中的排序函数&#xff08;如C的std::sort&#xff09;&#xff0c;但了解并实现这些基础排序算法对于理解算法…...

Python -- GUI图形界面编程—GUI编程实例 博主也在持续学习中[ 持续更新中!!! 欢迎白嫖 也求粉啊啊啊~ ]

本文介绍了GUI的图形界面编程&#xff08;相关视频是哔站上的应该搜这个题目就能找到&#xff09;&#xff0c;文章还是很基础的&#xff0c;反正我是小白从0开始&#xff0c;主要的结构tinkter库、重要组件简介&#xff08;这个不用死记硬背 用的时候再说&#xff09;、Label&…...

Vue2和Vue3中的diff算法

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、diff算法是什么&#xff1f;二、vue2中的diff算法三、vue3中的diff算法总结 前言 一、diff算法是什么&#xff1f; diff算法很早就存在了&#xff0c;一开…...

springboot使用aop或Jackson进行数据脱敏

1.aop 启动类加EnableAspectJAutoProxy 自定义注解&#xff0c;在实体类中使用表示被脱敏字段 建立aop切面类 可能这里gpt会建议你用Pointcut("execution(public * com.xx.aop..*.get*(..))")这种方式拦截&#xff0c;这种我试了&#xff0c;拦截不住。猜测在mvc返…...

【Solidity】基础介绍

数据类型 值类型 值类型的变量在赋值或作为函数参数传递时会被复制。 布尔类型&#xff1a;bool整数类型&#xff1a; 无符号&#xff1a;uint8、uint16、…、uint256 (uint256 可简写为 uint)有符号&#xff1a;int8、int16、…、int256 (int256可简写为 int) 地址类型&…...

【SpringBoot3】双向实时通讯 websocket

文章目录 一、Websocket使用步骤二、示例1&#xff1a;继承抽象类 AbstractWebSocketHandler后端代码前端代码 三、示例2&#xff1a;使用注解ServerEndpoint后端代码前端代码 四、前端代码封装 一、Websocket使用步骤 在Spring Boot中使用WebSocket是一个常见的需求&#xff…...

搭建内网开发环境(一)|基于docker快速部署开发环境

引言 最近因需要搭建一套简易版的纯内网的开发环境&#xff0c;服务器采用 centos8.0&#xff0c;容器化技术采用 docker 使用 docker-compose 进行容器编排。 该系列教程分为两大类&#xff1a; 软件安装和使用&#xff0c;这类是开发环境常用的软件部署和使用&#xff0c;涉…...

MATLAB R2023b配置Fortran编译器

MATLAB R2023b配置Fortran编译器 引言1. 安装Visual Studio 20192. 安装Intel API20243. 配置xml文件文件4. 设置环境变量5. MATLAB编译Fortran 引言 当我们需要用到MATLAB编译Fortran代码后进行调用计算时&#xff0c;整个配置流程较繁琐。下面以MATLAB R2023b为例&#xff0…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...