xiaogang

ColorUI 源代码
2026-06-08 15:23:17 +08:00 · 2018-06-19 21:21:54 +08:00
parent 9e6720d0dc
commit 3834693e84
114 changed files with 4477 additions and 0 deletions
@@ -0,0 +1,5 @@
+// pages/document/timeline/timeline.js
+Page({
+  data: {  
+  },
+})
@@ -0,0 +1 @@
+{}
@@ -0,0 +1,77 @@
+<view class="bar solid-bottom">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>物流时间轴</text>
+  </view>
+</view>
+<view class='timeline'>
+  <view class='timeline-time'>昨天</view>
+  <view class="timeline-box">
+    <view class='timeline-item cur'>
+      <view class='timeline-main'>
+        <text class='mr-sm'>22:22</text> 【广州市】快件已到达地球
+      </view>
+    </view>
+    <view class='timeline-item'>
+      <view class='timeline-main'>
+        <text class='mr-sm'>20:00</text> 【月球】快件已到达月球，准备发往地球
+      </view>
+      <view class='timeline-main mt-xs'>
+        <text class='mr-sm'>10:00</text> 【银河系】快件已到达银河系，准备发往月球
+      </view>
+    </view>
+  </view>
+  <view class='timeline-time'>06-17</view>
+  <view class="timeline-box">
+    <view class='timeline-item'>
+      <view class='timeline-main'>
+        <text class='mr-sm'>01:30</text> 【喵星】 MX-12138 已揽收，准备发往银河系
+      </view>
+    </view>
+  </view>
+</view>
+<view class="bar solid-bottom mt-sm">
+  <view class='ml-sm'>
+    <text class='iconfont icon-titles success-text'></text>
+    <text class='text-lg ml-xs'>日记时间轴</text>
+  </view>
+</view>
+<view class='timeline'>
+  <view class="timeline-box">
+    <view class='timeline-item timeline-sm'>
+      <view class='timeline-main'>
+        <view class='badge secondary radius capsule-badge'>
+          <text>上午</text>
+          <text>10:00</text>
+        </view>
+        <view class='mt-sm text-sm'>这是第一次，我家的铲屎官走了这么久。久到足足有三天！！ 在听到他的脚步声响在楼梯间的那一刻，我简直想要破门而出，对着他狠狠地吼上10分钟，然后再看心情要不要他进门。</view>
+        <view class="lattice-image">
+          <view>
+            <image src='http://image.weilanwl.com/img/4x3-2.jpg' mode='aspectFill'></image>
+          </view>
+          <view style="background-image:url('http://image.weilanwl.com/img/4x3-3.jpg')"></view>
+          <view style="background-image:url('http://image.weilanwl.com/img/4x3-4.jpg')"></view>
+          <view>
+            <image src='http://image.weilanwl.com/img/4x3-1.jpg' mode='aspectFill'></image>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class='timeline-item timeline-sm'>
+      <view class='timeline-main'>
+        <view class='badge secondary radius capsule-badge'>
+          <text>晚上</text>
+          <text>3:00</text>
+        </view>
+        <view class='mt-sm text-sm'>晚上的星星可真多呀.我轻轻地躺在他身边,用手紧紧地勾着他的衣服,在他脸上舔了舔.又没拍爽肤水....不过,我就是喜欢.</view>
+        <view class="lattice-image">
+          <view>
+            <image src='http://image.weilanwl.com/img/4x3-2.jpg' mode='aspectFill'></image>
+          </view>
+          <view style="background-image:url('http://image.weilanwl.com/img/4x3-3.jpg')"></view>
+          <view style="background-image:url('http://image.weilanwl.com/img/4x3-4.jpg')"></view>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>
@@ -0,0 +1,71 @@
+page {
+  background: #f5f5f5;
+}
+
+.timeline {
+  background: #fff;
+}
+
+.timeline-item {
+  padding: 20rpx 20rpx 20rpx 140rpx;
+  position: relative;
+}
+
+.timeline-item::after {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 1rpx;
+  background: #ddd;
+  left: 70rpx;
+  height: 100%;
+  top: 0;
+  z-index: 8;
+}
+
+.timeline-item::before {
+  content: "";
+  display: block;
+  position: absolute;
+  width: 15rpx;
+  background: #ddd;
+  left: 57rpx;
+  height: 15rpx;
+  border: 8rpx solid #fff;
+  border-radius: 50%;
+  top: 45rpx;
+  z-index: 9;
+}
+
+.timeline-item.cur::before, .timeline-item.cur::after,
+.timeline-item.cur .timeline-main {
+  background: #39b54a;
+  color: #fff;
+}
+
+.timeline-time {
+  width: 140rpx;
+  text-align: center;
+  padding: 20rpx;
+  font-size: 26rpx;
+  color: #888;
+}
+
+.timeline-main {
+  color: #666;
+  background: #f1f1f1;
+  padding: 20rpx;
+  border-radius: 6rpx;
+}
+
+.timeline-item.timeline-sm {
+  padding: 20rpx 20rpx 20rpx 100rpx;
+}
+
+.timeline-item.timeline-sm::after {
+  left: 50rpx;
+}
+
+.timeline-item.timeline-sm::before {
+  left: 37rpx;
+}