前端学习(1730):前端系列javascript之发布窗口布局上
index.vue
<template><view class="content"><view class="todo-header"><view class="todo-header_left"><text class="active-text">全部</text><text>10条</text></view><view class="todo-header_right"><view class="todo-header_right_item active_tab">全部</view><view class="todo-header_right_item">待办</view><view class="todo-header_right_item">已完成</view></view></view><view class="todo-content"><view class="todo-list todo_finish"><view class="todo-list_checkbox"><view class="checkbox"></view></view><view class="todo-list_content">我的代办事项</view></view><view class="todo-list "><view class="todo-list_checkbox"><view class="checkbox"></view></view><view class="todo-list_content">我的代办事项</view></view></view><view class="create_todo"><text class="iconfont icon-jia"></text></view><view class="create-content"><view class="create-input"><input type="text" value="" placeholder="请输入您要创建的todo" /></view><view class="create_button">创建</view></view></view>
</template><script>export default {data() {return {title: 'Hello'}},onLoad() {},methods: {}}
</script><style>@import '../../common/icon.css';
.todo-header{display: flex;align-items: center;padding: 0 15px;font-size: 12px;height: 45px;box-shadow: -1px 1px 5px 0 rgba(0,0,0,0.1) ;background: #FFFFFF;
}
.todo-header_left{width: 100%;
}
.active-text{font-size: 14px;color: #279def;padding-right: 10px;
}
.todo-header_right{flex-shrink: 0;display: flex;
}
.todo-header_right_item{padding: 0 5px;
}
.active_tab{color: #279def;
}
.todo-content{position: relative;
}
.todo-list{position: relative;display: flex;align-items: center;padding: 15px;margin: 15px;color: #0c3854;font-size: 14px;border-radius: 10px;background: #cfebfd;box-shadow: -1px 1px 5px 0 rgba(0,0,0,0.1) ,-1px 2px 1px 0 rgba(255,255,255) inset;overflow: hidden;
}
.todo-list:after{position: absolute;content: '';top:0;left: 0;bottom:0;width: 5px;background: #91d1e8;
}
.todo-list_checkbox{padding-right: 15px;
}
.checkbox{width: 20px;height: 20px;border-radius: 50%;background: #FFFFFF;box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1);}
.todo_finish .checkbox{position: relative;background: #eee;
}
.todo_finish .checkbox:after{content: '';position: absolute;width: 10px;height: 10px;top: 0;left: 0;right: 0;bottom: 0;margin: auto;border-radius: 50%;background: #CFEBFD;box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.2) inset;
}
.todo_finish .todo-list_content {color: #999999;
}.todo_finish.todo-list:before{content: '';position: absolute;top: 0;bottom: 0;left: 40px;right: 10px;height: 2px;margin: auto 0;background: #bdcdd8;}.todo_finish .todo-list_content:after{background: #cccccc;}.create_todo{display: flex;justify-content: center;align-items: center;position: fixed;bottom: 20px;left: 0;right: 0;margin: 0 auto;width: 50px;height: 50px;border-radius: 50%;background-color: #deeff5;box-shadow: -1px 1px 5px 2px rgba(0, 0, 0, 0.1), -1px 1px 1px 0 rgba(255, 255, 255) inset;}.icon-jia {font-size: 30px;color: #add8e6;}.create-content{display: flex;align-items: center; position: fixed;bottom: 95px;left: 20px;right: 20px;padding:0 15px;padding-right: 0;border-radius: 50px;background: pink;ox-shadow: -1px 1px 5px 2px rgba(0, 0, 0, 0.1);}.create-input{/* width: 100%;padding-right: 15px; */width: 100%;padding-right: 15px;color: #add8e6;}.create_button{display: flex;justify-content: center;align-items: center;flex-shrink: 0;width: 80px;height: 50px;border-radius: 50px;font-size: 16px;color: #88d4ec;box-shadow: -2px 0px 2px 1px rgba(0, 0, 0, 0.1);}
</style>
运行结果
前端学习(1730):前端系列javascript之发布窗口布局上相关推荐
- 前端学习(1731):前端系列javascript之发布窗口布局下
index.vue <template><view class="content"><view class="todo-header&quo ...
- 2021年最新版Web前端学习路线图-前端小白入门必读-推荐
2021年最新版Web前端学习路线图-前端小白入门必读-推荐 Hello,大家好,相信很多学习前端的小伙伴,会有很多的疑惑: 我要学习那些技术? 我要到哪里去学习这些技术呢? 学习这些技术的目的对就业 ...
- Java前端学习(一)JavaScript脚本语言基础
JavaScript脚本语言基础 前言 一.JavaScript简介 1.应用 2.特点 3.示例 4.补充 二.语法基础 1.数据类型 2.表达式和运算符 3.流程控制语句 4.函数 三.对话框 1 ...
- web前端学习之前端重构方案,来了解一下
前端技术发展很快,很多项目面临前端部分重构,很开心可以让我进行这次项目前端的重构方案编写,在思考的同时参考了网上很多资料,希望本篇重构方案有一定的完整性,可以带给大家一些在面临重构时有用的东西,同时希 ...
- 顾川的前端学习笔记--前端开发基础
阶段一前端开发基础 初始HTML 本阶段重难点 3.29小时40小节4个模块 CSS选择器 盒模型 CSS三大特性 浮动和清楚浮动 CSS四种定位 CSS进阶 CSS3 前端工程师需要会的PS取图 案 ...
- 前端学习(1729):前端系列javascript之内容卡片布局
<template><view class="content"><view class="todo-header">< ...
- 前端学习(2461):打包发布
# 十.打包发布## 构建打包在发布上线之前,我们需要执行构建打包,将 `.less`.`.vue`.`.js` 等相关资源进行编译打包,转换成浏览器可以直接识别运行的普通 `css`.`js`.`h ...
- Web前端学习-第三课JavaScript篇
Q5:解释什么是引用类型?在使用引用类型的时候需要注意什么? 引用类型通常叫做类,也就是说,遇到引用值时,所处理的就是对象,就是公用. 类型: object类型,应用于应用程序中存储和数据传输(创建 ...
- 【融职培训】Web前端学习 第3章 JavaScript基础教程9 内置对象
一.内置对象概述 javascript为我们提供了很多内置对象,这些内置对象为我们提供了很多语言的基本功能.我们之前学过的数组就是JavaScript的内置对象,除了数组我们还应该了解的内置对象有:M ...
最新文章
- 项目经理必读:虚拟化评估与设计14步
- 线程中的yield()
- spring导入约束
- 周末,说声php的settergetter(魔术)方法,你们辛苦了
- Docker开启远程安全访问
- 清华大学数学教授吐槽不会做孙子的小学奥数:这学的不是数学,是戏法
- Django:cmd虚拟环境及第一个project、Pycharm虚拟环境及第一个project、Not Found favicon.ico、Windows命令行创建虚拟环境、Django版本选择
- html mui按钮居中,《mui学习笔记》:自定义选项卡
- ctags的如何生成tags文件
- 数据库基础知识(MySQL入门)
- 如何将YouTube和其他网络视频投射到Kodi(例如Chromecast)
- android手机无分区无法刷机,adb sideload 刷机教程:当你手机无法开机,内存里没有ROM时......
- 4年级计算机 设计贺卡教案,第三课制作节日贺卡 教学设计
- 无他,唯手熟尔-前端实习面试题篇
- ArcGIS基础:面数据空洞填充的方法
- IFD-x 微型红外成像仪(模块)与计算机工具软件 IFD_Tool 连接
- 程序员可以收藏的几个导航网站
- 2 c++编程-核心
- java爬虫实例_关于java爬虫以及一些实例
- 微信小程序解包wxappUnpacker-master 样式解不出来 SyntaxError: Unexpected end of input 的解决方式
热门文章
- window使用技巧记录
- android 打电话
- (转载)Android两种Tab分页的方式:TabActivity和ActivityGroup以及Android项目几种常见的应用架构...
- 黑马程序员 java基础之网络编程TCP
- ASP.NET中下载文件的几种方法
- java界面化二叉排序树_层次序创建二叉树(图形界面和控制台输入实现)
- python excelwriter保存路径_Python和Excel 终于可以互通了!!
- iangularjs 模板_2018-web前端的自我介绍-优秀word范文 (5页)
- python3 set_python3.x 基础三:set集合
- 数据处理工具(一)——Matplotlib