Skip to content

U
uni-app

Velpro187 / uni-app
与 Fork 源项目一致

Fork自 DCloud / uni-app

通知 1
Star 1
Fork 0
U
uni-app

体验新版 GitCode，发现更多精彩内容 >>

提交 bc7e8869 编写于 作者: 蓝色的小猫咪's avatar 蓝色的小猫咪
浏览文件
操作

调整时间轴页面

上级 dda449b5
隐藏空白更改
内联 并排
Showing with 111 addition and 126 deletion
examples/hello-uniapp/common/uni.css
浏览文件 @ bc7e8869
......@@ -967,4 +967,88 @@ radio-group label, checkbox-group label{
color: #ffffff;
padding: 0 10upx;
border-radius: 5upx;
}
\ No newline at end of file
}
/* timeline */
.uni-timeline {
margin: 35upx 0;
display: flex;
flex-direction: column;
position: relative;
}
.uni-timeline-item {
display: flex;
flex-direction: row;
position: relative;
padding-bottom: 20upx;
box-sizing: border-box;
overflow: hidden;
}
.uni-timeline-item .uni-timeline-item-keynode {
width: 160upx;
flex-shrink: 0;
box-sizing: border-box;
padding-right: 20upx;
text-align: right;
line-height: 65upx;
}
.uni-timeline-item .uni-timeline-item-divider {
flex-shrink: 0;
position: relative;
width: 30upx;
height: 30upx;
top: 15upx;
border-radius: 50%;
background-color: #bbb;
}
.uni-timeline-item-divider::before,
.uni-timeline-item-divider::after {
position: absolute;
left: 15upx;
width: 1upx;
height: 100vh;
content: '';
background: inherit;
}
.uni-timeline-item-divider::before {
bottom: 100%;
}
.uni-timeline-item-divider::after {
top: 100%;
}
.uni-timeline-last-item .uni-timeline-item-divider:after {
display: none;
}
.uni-timeline-first-item .uni-timeline-item-divider:before {
display: none;
}
.uni-timeline-item .uni-timeline-item-content {
padding-left: 20upx;
}
.uni-timeline-last-item .bottom-border::after{
display: none;
}
.uni-timeline-item-content .datetime{
color: #CCCCCC;
}
/* 自定义节点颜色 */
.uni-timeline-last-item .uni-timeline-item-divider{
background-color: #1AAD19;
}
\ No newline at end of file
examples/hello-uniapp/pages/template/timeline/timeline.vue
浏览文件 @ bc7e8869
......@@ -2,49 +2,48 @@
<view class="page">
<page-head :title="title"></page-head>
<view class="">
<view class="title">双栏时间轴</view>
<view class="timeline" style="padding: 30upx 20upx;background-color: #fff;">
<view class="timeline-item timeline-first-item">
<view class="timeline-item-keynode">2018.05</view>
<view class="timeline-item-divider"></view>
<view class="timeline-item-content">uni-app 立项</view>
<view class="uni-title uni-center">双栏时间轴</view>
<view class="uni-timeline" style="padding: 30upx 20upx;background-color: #fff;">
<view class="uni-timeline-item uni-timeline-first-item">
<view class="uni-timeline-item-keynode">2018.05</view>
<view class="uni-timeline-item-divider"></view>
<view class="uni-timeline-item-content">uni-app 立项</view>
</view>
<view class="timeline-item">
<view class="timeline-item-keynode">2018.07</view>
<view class="timeline-item-divider"></view>
<view class="timeline-item-content">uni-app 正式发布，使用vue技术，开发一次，iOS、Android、微信小程序三端同时生成</view>
<view class="uni-timeline-item">
<view class="uni-timeline-item-keynode">2018.07</view>
<view class="uni-timeline-item-divider"></view>
<view class="uni-timeline-item-content">uni-app 正式发布，使用vue技术，开发一次，iOS、Android、微信小程序三端同时生成</view>
</view>
<view class="timeline-item timeline-last-item">
<view class="timeline-item-keynode">2018.10</view>
<view class="timeline-item-divider"></view>
<view class="timeline-item-content">uni-app 支持使用 npm 安装依赖，支持微信小程序自定义组件</view>
<view class="uni-timeline-item uni-timeline-last-item">
<view class="uni-timeline-item-keynode">2018.10</view>
<view class="uni-timeline-item-divider"></view>
<view class="uni-timeline-item-content">uni-app 支持使用 npm 安装依赖，支持微信小程序自定义组件</view>
</view>
</view>
<view class="title">单栏时间轴</view>
<view class="timeline" style="padding: 30upx 20upx;background-color: #fff;">
<view class="timeline-item timeline-first-item">
<view class="timeline-item-divider"></view>
<view class="timeline-item-content bottom-border">
<view class="uni-title uni-center">单栏时间轴</view>
<view class="uni-timeline" style="padding: 30upx 20upx;background-color: #fff;">
<view class="uni-timeline-item uni-timeline-first-item">
<view class="uni-timeline-item-divider"></view>
<view class="uni-timeline-item-content">
<view>
uni-app 立项
</view>
<view class="datetime">
2018.05
</view>
</view>
</view>
<view class="timeline-item">
<view class="timeline-item-divider"></view>
<view class="timeline-item-content bottom-border">
<view class="uni-timeline-item">
<view class="uni-timeline-item-divider"></view>
<view class="uni-timeline-item-content">
<view>uni-app 正式发布，使用vue技术，开发一次，iOS、Android、微信小程序三端同时生成</view>
<view class="datetime">2018.07</view>
</view>
</view>
<view class="timeline-item timeline-last-item">
<view class="timeline-item-divider"></view>
<view class="timeline-item-content bottom-border">
<view class="uni-timeline-item uni-timeline-last-item">
<view class="uni-timeline-item-divider"></view>
<view class="uni-timeline-item-content">
<view>uni-app 支持使用 npm 安装依赖，支持微信小程序自定义组件</view>
<view class="datetime">2018.10</view>
</view>
......@@ -65,104 +64,6 @@
}
</script>
<style>
.page {
background: #efeff4;
}
.title {
padding: 20upx;
}
.timeline {
margin: 35upx 0;
display: flex;
flex-direction: column;
position: relative;
}
.timeline-item {
display: flex;
flex-direction: row;
position: relative;
padding-bottom: 20upx;
box-sizing: border-box;
overflow: hidden;
}
.timeline-item .timeline-item-keynode {
width: 180upx;
flex-shrink: 0;
box-sizing: border-box;
padding-right: 20upx;
text-align: right;
}
.timeline-item .timeline-item-divider {
flex-shrink: 0;
position: relative;
width: 20upx;
height: 20upx;
top: 15upx;
border-radius: 50%;
background-color: #bbb;
}
.timeline-item-divider::before,
.timeline-item-divider::after {
position: absolute;
left: 10upx;
width: 1upx;
height: 100vh;
content: '';
background: inherit;
}
.timeline-item-divider::before {
bottom: 100%;
}
.timeline-item-divider::after {
top: 100%;
}
.timeline-last-item .timeline-item-divider:after {
display: none;
}
.timeline-first-item .timeline-item-divider:before {
display: none;
}
.timeline-item .timeline-item-content {
padding-left: 20upx;
}
.bottom-border::after{
position: absolute;
left:40upx;
right: 0;
height: 1px;
content: '';
background-color: #bbb;
}
.timeline-last-item .bottom-border::after{
display: none;
}
.timeline-item-content .datetime{
color: #CCCCCC;
}
/* 自定义节点颜色 */
.timeline-last-item .timeline-item-divider{
background-color: #1AAD19;
}
<style>
</style>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或