工作227:小程序学习1开始布局页面

<template><view class="box u-p-l-35 u-p-r-35 "><view class="title"><text>请选择您要管理的市场</text></view><view :class=" ['u-flex','u-row-center',{'choose_market': selectIndex ==0},{'market' : selectIndex != 0}] " @click="choose(0)"><view class=" u-row-center  ">苏州花开农创智慧科技</view></view><view :class=" ['u-flex','u-row-center',{'choose_market' : selectIndex == 1},{'market' : selectIndex != 1}] " @click="choose(1)"style="justify-content: center;"><text class="u-row-center">长江农副产品综合市场</text></view><view :class=" ['u-flex','u-row-center',{'choose_market' : selectIndex == 2},{'market' : selectIndex != 2 }] " @click="choose(2)"><text>体育路农贸市场</text></view><u-button class="determine">确定</u-button></view>
</template><script>export default {data() {return {selectIndex: 0}},methods: {//提交sub: function() {},//切换choose: function(e) {this.selectIndex = e},},}
</script><style lang="scss">.box {background-color: white;.title {color: #333333;font-size: 34rpx;margin-bottom: 50rpx;padding-top: 224rpx;}.choose_market {width: 100%;height: 120rpx;background: #F0F8FC;border: 2rpx solid #1FB5FE;opacity: 1;border-radius: 8rpx;font-size: 30rpx;font-family: PingFangSC;font-weight: 400;line-height: 40rpx;color: #1FB5FE;margin-bottom: 30rpx;}.market {width: 100%;height: 120rpx;background: #F1F1F1;opacity: 1;border-radius: 8rpx;font-size: 30rpx;font-family: PingFangSC;font-weight: 400;line-height: 40rpx;color: #666666;margin-bottom: 30rpx;}.determine {width: 684rpx;height: 96rpx;background: linear-gradient(91deg, #43B9FD 0%, #1FB5FE 100%);border-radius: 66rpx;font-size: 36rpx;font-family: PingFangSC;font-weight: 400;line-height: 40rpx;color: #FFFFFF;opacity: 1;position: absolute;bottom: 18rpx;}}
</style>

运行结果

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

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

相关文章

工作228:小程序学习2开始布局页面2

<template><view class"box u-p-l-35 u-p-r-35 "><view class"title"><text>请选择您要管理的市场</text></view><view :class" [u-flex,u-row-center,{choose_market: selectIndex 0},{market : selectIndex…

mybatis BindingException: Invalid bound statement (not found)

错误截图 解决措施 此异常的原因是由于mapper接口编译后在同一个目录下没有找到mapper映射文件而出现的。 通常我们在配置SqlSessionFactory时会有如配置 1 <!-- 配置SqlSessionFactory -->2 <bean class"org.mybatis.spring.SqlSessionFactoryBean">…

前端学习(2712):重读vue电商网站32之让菜单栏展开与折叠

通过点击一个按钮&#xff0c;让侧边栏进行展开与折叠。通过 isCollapse 的值来动态变化侧边栏的宽度。 其中 cursor: pointer 设置是为了让鼠标放在折叠与展开处会有一个手指指向。 letter-spacing: 0.2em 是为了让 ||| 有一定间隔

Myeclipse下Maven的配置

1.配置    window--Preferences JDK的配置(执行命令&#xff0c;控制台可能无法输出) -Dmaven.multiModuleProjectDirectory$MAVEN_HOME 新建 Maven Project 转载于:https://www.cnblogs.com/xdalsh/p/8399299.html

前端学习(2713):重读vue电商网站33之实现首页路由重定向

我们想要在登录之后重定向到 /welcome 路径&#xff0c;于是需要添加子路由children 属性&#xff0c;然后设置 redirect重定向到我们的子路由。 然后在我们组件 Home.vue 的右侧主体区域&#xff0c;放置一个路由占位符 router-view 即可。

myeclipse链接数据库,SQL语句实现增删改查

1、创建properties文件 #oracle #driveroracle.jdbc.OracleDriver #urljdbc\:oracle\:thin\:localhost\:1521\:xe #usernamesystem #passwordmanager #mysql drivercom.mysql.jdbc.Driver urljdbc\:mysql\://192.168.0.121\:3306/test?user\root&password\root&chara…

前端学习(2714):重读vue电商网站34之侧边栏路由改造

通过给侧边栏设置 router 属性为 true&#xff0c;我们就能开启 vue-router 路由模式&#xff0c;然后将我们二级菜单的 index 属性绑定我们的数据 path 即可。

(转)spring中的拦截器(HandlerInterceptor+MethodInterceptor)

1. 过滤器跟拦截器的区别 在说拦截器之前&#xff0c;不得不说一下过滤器&#xff0c;有时候往往被这两个词搞的头大。 其实我们最先接触的就是过滤器&#xff0c;还记得web.xml中配置的<filter>吗~ 你应该知道spring mvc的拦截器是只拦截controller而不拦截jsp,html 页…

ASP.NET Core源码学习(一)Hosting

ASP.NET Core源码的学习&#xff0c;我们从Hosting开始&#xff0c; Hosting的GitHub地址为&#xff1a;https://github.com/aspnet/Hosting.git 朋友们可以从以上链接克隆或是下载。 为什么是从Hosting开始学习呢&#xff1f;我们来看看ASP.NET Core MVC项目中的Pragram.CS中的…

前端学习(2715):重读vue电商网站35之在sessionStorage保存左侧菜单栏的激活状态

为了让我们点击二级菜单时&#xff0c;会有一个激活效果&#xff0c;而且是保持状态&#xff0c;我们需要将利用 element-ui 菜单栏相关 default-active 属性&#xff0c;来让菜单保持激活。 由于每个二级菜单都有一个路由链接&#xff0c;不妨将路由路径 path 存储在 sessionS…

Struts2的通配符配置方式

Struts2的Action类很有意思&#xff0c;你可以使用3种方式来实现具体的Action类&#xff1a; 让你的Action类继承自ActionSupport类&#xff08;项目中最常用这种方式&#xff0c;因为ActionSupport类中定义了很多帮助方法&#xff09;让你的Action类实现Action接口使用POJO的…

spring拦截器-过滤器的区别

1. 理解 拦截器 &#xff1a;是在面向切面编程的时候&#xff0c;在你的 service 或者一个方法前调用一个方法&#xff0c;或者在方法后调用一个方法&#xff1b;比如动态代理就是拦截器的简单实现&#xff0c;在你调用方法前打印出字符串&#xff08;或者做其它业务逻辑的操作…

前端学习(2716):重读vue电商网站36之slot插槽使用

项目需求&#xff1a;由于用户列表状态后台返回的是 true/false&#xff0c;无法进行渲染&#xff0c;而我们需要的是有一个Switch开关来控制我们的状态。添加一个template 模板后&#xff0c;此时就可以用 slot-scope 作用域插槽来获取我们数据列表中的每一行数据&#xff0c;…

前端学习(2717):重读vue电商网站37之通过switch开关更改用户状态

首先&#xff0c;在 switch 开关添加一个 change 事件&#xff0c;并且通过作用域插槽的形式&#xff0c;将该行数据作为参数传入&#xff0c;目的是为了后续的修改。 在函数内我们将传递过来的参数作为我们请求的参数&#xff0c;通过 put 方式修改我们的后台数据 。

边框回归(Bounding Box Regression)详解

原文地址&#xff1a;http://blog.csdn.net/zijin0802034/article/details/77685438 Bounding-Box regression 最近一直看检测有关的Paper, 从rcnn&#xff0c; fast rcnn, faster rcnn, yolo, r-fcn, ssd&#xff0c;到今年cvpr最新的yolo9000。这些paper中损失函数都包含了边…

前端学习(2718):重读vue电商网站38之通过input输入框优化

通过增加 clearable 属性&#xff0c;我们的输入框就可以多一个 x&#xff0c;然后通过绑定 clear 事件&#xff0c;当我们进行清除 &#xff08;即点击由 clearable 属性生成的清空按钮时触发)时&#xff0c;就会重新获取我们的用户列表&#xff0c;不再需要用户再次点击搜索按…

Oracle不连续的值,如何实现查找上一条、下一条

1. 遇到的问题 已知一个题库&#xff0c;希望实现当前页切换上一题&#xff0c;下一题的需求。 查看得知&#xff0c;数据库中用于查询的字段(主键)是不连续的。如上图所示&#xff1a;stxh为主键number类型。 2. 实现方式lead over 2.1 实现代码 下一条 select nowId, afte…

前端学习(2719):重读vue电商网站39之正则表达式验证邮箱和手机号码

Javascript // 验证邮箱的规则var checkEmail (rule, value, cb) > {const regEmail /^([a-zA-Z]|[0-9])(\w|-)[a-zA-Z0-9]\.([a-zA-Z]{2,4})$/if (regEmail.test(value)) {// 合法的邮箱return cb()}cb(new Error(请输入合法的邮箱))}// 验证手机号码的规则var checkMobi…

支付宝提现,单笔转账到支付宝账户

很简单。只需三个参数实现 单笔转账到支付宝账户 1、获取开放平台创建的APPID&#xff0c;同时必须添加 单笔转账到支付宝账户 这个功能 开放平台&#xff1a;https://open.alipay.com/platform/home.htm 2、登录支付宝商家中心平台&#xff1a;https://b.alipay.com/index.h…

前端学习(2730):重读vue电商网站40之使用vue-table-with-tree-grid

安装新的依赖 vue-tabel-with-tree-gridvue-tabel-with-tree-grid 官方文档 安装完成后&#xff0c;在 main.js 入口文件内先导入 tree-tabel 然后全局注册组件 tree-tabel 页面中&#xff0c;我们使用了如下属性&#xff1a; data 确定我们的数据源&#xff0c;columns定义我…