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

面试自我介绍整理

面试前&#xff1a; 我是***&#xff0c;***年毕业于****学校&#xff0c;目前就职于***公司&#xff0c;工作期间参与并开发了****项目&#xff1a; 项目为了解决****问题&#xff0c;项目的应用场景主要是街道、工业园区等等&#xff0c;项目的主要做成模块和组成部分有&am…

亚信科技笔试题

不清楚这道题是不是亚信科技的原创题目&#xff0c;貌似在网上看到微软的笔试也有这道题目。原题的是c语言解决的&#xff0c;考虑java熟练一些。自己就有java来写这道题的算法。 题目描写叙述&#xff1a;编写一个确定字符串在还有一个字符串中出现的次数的算法。比如字符串“…

什么是框架?spring mvc框架

框架&#xff1a; 框指的是其是一个框子&#xff0c;有约束性&#xff1b;架是指的其支撑性。IT中的框架主要指的为解决特定的一个开放性问题而设计的具有一定约束性的支撑结构。在次结构上可以根据具体问题安插、扩展更多的组成部分&#xff0c;从而迅速和方便的构建完整的解…

mysql批量生成修改表和列注释语句

当我们在一个数据库修改完备注后&#xff0c;需要将其导致另一个服务器上的数据库中&#xff0c;需要生成批量执行语句&#xff0c;方便操作&#xff0c;注意用change 或modified 进行列的属性修改时&#xff0c;没有写全的话会造成其它属性的丢失&#xff0c;如 t_users 表中有…

14 | 排序优化:如何实现一个通用的、高性能的排序函数?

问题&#xff1a;平时的开发中&#xff0c;我们都是直接使用这些现成的函数来实现业务逻辑中的排序功能。这些排序函数是如何实现的吗&#xff1f;底层都利用了哪种排序算法呢&#xff1f;比如 C 语言中 qsort()&#xff0c;C STL 中的 sort()、stable_sort()&#xff0c;还有 …

15 | 二分查找(上):如何用最省内存的方式实现快速查找功能?

思考题&#xff1a;假设有 1000 万个整数数据&#xff0c;每个数据占 8 个字节&#xff0c;如何设计数据结构和算法&#xff0c;快速判断某个整数是否出现在这 1000 万数据中&#xff1f;希望不要占用太多的内存空间&#xff0c;最多不要超过 100MB 二分思想 查找算法 …

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

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

UVA 11557 - Code Theft (KMP + HASH)

UVA 11557 - Code Theft 题目链接 题意&#xff1a;给定一些代码文本。然后在给定一个现有文本&#xff0c;找出这个现有文本和前面代码文本&#xff0c;反复连续行最多的这些文本 思路&#xff1a;把每一行hash成一个值。然后对于每个文本计算最大匹配值&#xff0c;枚举后缀。…

上传图片预览,支持IE6

//说明&#xff1a;图片上传预览插件 //上传的时候可以生成固定宽高范围内的等比例缩放图//参数设置&#xff1a; //width 存放图片固定大小容器的宽 //height 存放图片固定大小容器的高 //imgDiv 页面DIV的JQuery的…

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

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

亲和数 杭电2040

古希腊数学家毕达哥拉斯在自然数研究中发现&#xff0c;220的所有真约数(即不是自身的约数)之和为&#xff1a; 1245101120224455110&#xff1d;284。 而284的所有真约数为1、2、4、71、 142&#xff0c;加起来恰好为220。人们对这样的数感到很惊奇&#xff0c;并称之为亲和数…

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 的有序集合是使用跳…

“睡服”面试官系列第二十三篇之修饰器(建议收藏学习)

目录 1. 类的修饰 2. 方法的修饰 3. 为什么修饰器不能用于函数&#xff1f; 4. core-decorators.js 4.1autobind 4.2readonly 4.3override 4.4deprecate (别名deprecated) 4.5suppressWarnings 5. 使用修饰器实现自动发布事件 6. Mixin 7. Trait 8. Babel 转码器的…