前端学习(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>

运行结果

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

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

相关文章

赵雅智:service_startService生命周期

案例演示 布局文件 <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"xmlns:tools"http://schemas.android.com/tools"android:layout_width"match_parent"android:layout_height"match_parent"tools:co…

16 | 二分查找(下):如何快速定位IP对应的省份地址?

问题&#xff1a;假设我们有 12 万条这样的 IP 区间与归属地的对应关系&#xff0c;如何快速定位出一个 IP 地址的归属地呢&#xff1f; 二分查找的变形问题&#xff1a; 变体一&#xff1a;查找第一个值等于给定值的元素 public int bsearch(int[] a, int n, int value) {int…

17 | 跳表:为什么Redis一定要用跳表来实现有序集合?

问题&#xff1a;如果数据存储在链表中&#xff0c;就真的没法用二分查找算法了吗&#xff1f;可以对链表进行“改造”&#xff0c;就可以支持类似“二分”的查找算法。 跳表 定义&#xff1a;对链表经过改造之后的数据结构叫做跳表&#xff08;Skip list&#xff09;&#x…

18 | 散列表(上):Word文档中的单词拼写检查功能是如何实现的?

问题引入 在 Word 里输入一个错误的英文单词&#xff0c;它就会用标红的方式提示“拼写错误”&#xff0c;Word 文本编辑器的拼写检查功能是如何实现的呢&#xff1f;散列表&#xff08;Hash Table&#xff09; 散列表 散列表定义&#xff1a;散列表的英文叫“Hash Table”&…

19 | 散列表(中):如何打造一个工业级水平的散列表?

问题引入&#xff1a;如何实现一个工业级的散列表&#xff1f; 主要要求&#xff1a; 设计一个合适的散列函数&#xff1b;定义装载因子阈值&#xff0c;并且设计动态扩容策略&#xff1b;选择合适的散列冲突解决方法。 对于动态散列表来说&#xff0c;不管我们如何设计散列函…

RTTI: dynamic_cast typeid

dynamic_cast&#xff1a;将基类类型的指针向派生类指针安全转换。多用于下行转换。上行转换时&#xff0c;和static_cast是一样的。C类型转换看这里。而const_cast用来修改类型的const或volatile属性。。。下面主要说多态下的RTTI&#xff1a; 使用条件:  基类应有虚函数。 …

20 | 散列表(下):为什么散列表和链表经常会一起使用?

有两种数据结构&#xff0c;散列表和链表经常会被放在一起使用。常见的使用方式有&#xff1a; 用链表来实现 LRU 缓存淘汰算法&#xff0c;链表实现的 LRU 缓存淘汰算法的时间复杂度是 O(n)&#xff0c;通过散列表可以将这个时间复杂度降低到 O(1)。Redis 的有序集合是使用跳…

冬季小学期 NIIT公司 web前端培训 CSS

外边距合并 http://www.w3school.com.cn/css/css_margin_collapsing.asp div、p、h1 块元素 span行元素 浮动&#xff1a;浮动的框可以向左或向右移动&#xff0c;直到它的外边缘碰到包含框或另一个浮动框的边框为止。 http://www.w3school.com.cn/css/css_positioning_floatin…

BZOJ 1491: [NOI2007]社交网络( floyd )

floyd...求最短路时顺便求出路径数. 时间复杂度O(N^3) -------------------------------------------------------------------------------------------#include<cstdio>#include<algorithm>#include<cstring>using namespace std;typedef long long ll;con…

前端学习(1731):前端系列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><v…

Ace教你一步一步做Android新闻客户端(三) JSON数据解析

对于服务器端来说&#xff0c;返回给客户端的数据格式一般分为html、xml和json这三种格式&#xff0c;现在给大家讲解一下json这个知识点&#xff0c; 1 如何通过json-lib和gson这两个json解析库来对解析我们的json数据&#xff0c; 2 以及如何在我们的Android客户端解析来自服…

前端学习(1732):前端系列javascript之插入内容

index.vue <template><view class"content"><view v-if"list.length!0" class"todo-header"><view class"todo-header_left"><text class"active-text">全部</text><text>10条&…

前端学习(1732):前端系列javascript之状态切换

index.vue <template><view class"content"><view v-if"list.length!0" class"todo-header"><view class"todo-header_left"><text class"active-text">全部</text><text>10条&…

记一次若依ruoyi-ui(Vue2) 关闭tab页并打开新页面

网上教程很多&#xff0c;但是都是给前端代码段&#xff0c;都不知道怎么使用&#xff08;本人菜鸟一个&#xff09;&#xff0c;今天记一次完整的&#xff1a; 在你需要关闭的tab页面&#xff0c;加入以下代码&#xff1a; handleCommit()是我需要关闭页面的方法&#xff0c…

log4j自定义配置文件(SpringMVC项目)

问题来源 本周在实际项目中发现无法自定义的log4j-dev配置的error日志级别文件无法生效&#xff0c;项目启动后仍然采用默认的info级别日志进行打印。之所以自定义名称&#xff0c;是为了减少隔离不同环境的日志级别&#xff0c;比如开发dev环境使用debug、info级别&#xff0…

23 | 二叉树基础(上):什么样的二叉树适合用数组来存储?

思考题 二叉树有哪几种存储方式&#xff1f;什么样的二叉树适合用数组来存储&#xff1f; 树&#xff08;Tree&#xff09; 根节点&#xff1a;没有父节点的节点叶子节点或者叶节点&#xff1a;没有子节点的节点叫做 树的高度、深度、层&#xff1a; 举例说明&#xff1a; 生…