Skip to content

Y
yawei

yawei / yawei

通知 3
Star 1
Fork 1
Y
yawei

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 a90c34a6 编写于 作者: Y yang-zongying@qq.com
浏览文件
操作

细节完善

上级 e267a014
展开全部 隐藏空白更改
内联 并排
Showing with 202 addition and 164 deletion
components/TimeLine.vue
浏览文件 @ a90c34a6
...@@ -3,23 +3,23 @@ ...@@ -3,23 +3,23 @@
<view v-for="(item, index) in timelineItems" :key="index" class="timeline-item"> <view v-for="(item, index) in timelineItems" :key="index" class="timeline-item">
<view class="timeline-marker" :class="'timeline-marker--status'+ item.status "></view> <view class="timeline-marker" :class="'timeline-marker--status'+ item.status "></view>
<view class="timeline-content"> <view class="timeline-content">
<view class="fl-rsb mgb10"> <view class="pdtb5 fl bdr4" >
<view class="stit" :class="'timeline-marker--colorstatus'+ item.status ">{{ item.title }}</view> <!-- style="background: linear-gradient(145.89deg, rgba(65, 178, 255, 0) 0%, rgba(211, 236, 254, 0.5) 100%);" -->
<view class="timeline-date desc fl" v-if="item.date != ''">
<u--image :showLoading="true" :src="imgbaseUrl + 'time.png'" width="14px" height="14px" class="mgr5"></u--image>{{ $u.timeFormat(item.date, 'yyyy-mm-dd hh:MM') }}
</view>
</view>
<view class="timeline-header mgb5 pdtb5 fl bdr4" style="background: linear-gradient(145.89deg, rgba(65, 178, 255, 0) 0%, rgba(211, 236, 254, 0.5) 100%);">
<u-avatar :src="item.avatar" class="timeline-avatar" size="80"></u-avatar> <u-avatar :src="item.avatar" class="timeline-avatar" size="80"></u-avatar>
<view class="timeline-username fl-cs"> <view class="timeline-username fl-cs">
<view class="fl mgb10"> <view class="timeline-uleft mgb10">
<view class="desctext mgr5">{{ item.username }}</view> <view class="desctext mgr5">{{ item.username }}</view>
<view class="desc">{{ item.role }}</view> <view class="timeline-date desc tr" v-if="item.date != ''">
<u--image :showLoading="true" :src="imgbaseUrl + 'time.png'" width="14px" height="14px" class="mgr5"></u--image>
<view class="tr">{{ $u.timeFormat(item.date, 'yyyy-mm-dd hh:MM') }} </view>
</view>
</view> </view>
<view class="timeline-uright">
<view class="desctit">{{ item.content }}</view> <view class="desctit">{{ item.content }}</view>
<view class="dectext tr" :class="'timeline-marker--colorstatus'+ item.status ">{{ item.title }}</view>
</view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
...@@ -97,7 +97,7 @@ ...@@ -97,7 +97,7 @@
.timeline-marker { .timeline-marker {
position: absolute; position: absolute;
top: 0; top: 38px;
left: -6px; left: -6px;
width: 10px; width: 10px;
height: 10px; height: 10px;
...@@ -197,8 +197,23 @@ ...@@ -197,8 +197,23 @@
.timeline-username { .timeline-username {
/* font-weight: bold; */ /* font-weight: bold; */
width: 100%;
}
.timeline-uleft{
display: grid;
grid-template-columns: 40% 60%;
grid-template-rows: 1fr;
justify-content: space-between;
}
.timeline-uright{
display: grid;
grid-template-columns: 60% 40%;
grid-template-rows: 1fr;
justify-content: space-between;
.desctit{
color: #888;
}
} }
.timeline-title { .timeline-title {
font-size: 16px; font-size: 16px;
font-weight: 500; font-weight: 500;
...@@ -208,6 +223,9 @@ ...@@ -208,6 +223,9 @@
.timeline-date { .timeline-date {
font-size: 14px; font-size: 14px;
color: #888; color: #888;
display: flex;
justify-content: flex-end;
align-items: center;
} }
.timeline-description { .timeline-description {
......
unpackage/dist/dev/app-plus/app-view.js
浏览文件 @ a90c34a6
...@@ -10623,11 +10623,11 @@ __webpack_require__.r(__webpack_exports__); ...@@ -10623,11 +10623,11 @@ __webpack_require__.r(__webpack_exports__);
var components var components
try { try {
components = { components = {
uAvatar: __webpack_require__(/*! @/uni_modules/uview-ui/components/u-avatar/u-avatar.vue */ 82)
.default,
"u-Image": "u-Image":
__webpack_require__(/*! @/uni_modules/uview-ui/components/u--image/u--image.vue */ 41) __webpack_require__(/*! @/uni_modules/uview-ui/components/u--image/u--image.vue */ 41)
.default, .default,
uAvatar: __webpack_require__(/*! @/uni_modules/uview-ui/components/u-avatar/u-avatar.vue */ 82)
.default,
} }
} catch (e) { } catch (e) {
if ( if (
...@@ -10680,73 +10680,67 @@ var render = function () { ...@@ -10680,73 +10680,67 @@ var render = function () {
staticClass: _vm._$g("4-" + $30, "sc"), staticClass: _vm._$g("4-" + $30, "sc"),
attrs: { _i: "4-" + $30 }, attrs: { _i: "4-" + $30 },
}, },
[
_c(
"uni-view",
{
staticClass: _vm._$g("5-" + $30, "sc"),
class: _vm._$g("5-" + $30, "c"),
attrs: { _i: "5-" + $30 },
},
[_vm._v(_vm._$g("5-" + $30, "t0-0"))]
),
_vm._$g("6-" + $30, "i")
? _c(
"uni-view",
{
staticClass: _vm._$g("6-" + $30, "sc"),
attrs: { _i: "6-" + $30 },
},
[
_c("u--image", {
staticClass: _vm._$g("7-" + $30, "sc"),
attrs: { _i: "7-" + $30 },
}),
_vm._v(_vm._$g("6-" + $30, "t1-0")),
],
1
)
: _vm._e(),
],
1
),
_c(
"uni-view",
{
staticClass: _vm._$g("8-" + $30, "sc"),
staticStyle: {
background:
"linear-gradient(145.89deg, rgba(65, 178, 255, 0) 0%, rgba(211, 236, 254, 0.5) 100%)",
},
attrs: { _i: "8-" + $30 },
},
[ [
_c("u-avatar", { _c("u-avatar", {
staticClass: _vm._$g("9-" + $30, "sc"), staticClass: _vm._$g("5-" + $30, "sc"),
attrs: { _i: "9-" + $30 }, attrs: { _i: "5-" + $30 },
}), }),
_c( _c(
"uni-view", "uni-view",
{ {
staticClass: _vm._$g("10-" + $30, "sc"), staticClass: _vm._$g("6-" + $30, "sc"),
attrs: { _i: "10-" + $30 }, attrs: { _i: "6-" + $30 },
}, },
[ [
_c( _c(
"uni-view", "uni-view",
{ {
staticClass: _vm._$g("11-" + $30, "sc"), staticClass: _vm._$g("7-" + $30, "sc"),
attrs: { _i: "11-" + $30 }, attrs: { _i: "7-" + $30 },
}, },
[ [
_c( _c(
"uni-view", "uni-view",
{ {
staticClass: _vm._$g("12-" + $30, "sc"), staticClass: _vm._$g("8-" + $30, "sc"),
attrs: { _i: "12-" + $30 }, attrs: { _i: "8-" + $30 },
}, },
[_vm._v(_vm._$g("12-" + $30, "t0-0"))] [_vm._v(_vm._$g("8-" + $30, "t0-0"))]
), ),
_vm._$g("9-" + $30, "i")
? _c(
"uni-view",
{
staticClass: _vm._$g("9-" + $30, "sc"),
attrs: { _i: "9-" + $30 },
},
[
_c("u--image", {
staticClass: _vm._$g("10-" + $30, "sc"),
attrs: { _i: "10-" + $30 },
}),
_c(
"uni-view",
{
staticClass: _vm._$g("11-" + $30, "sc"),
attrs: { _i: "11-" + $30 },
},
[_vm._v(_vm._$g("11-" + $30, "t0-0"))]
),
],
1
)
: _vm._e(),
],
1
),
_c(
"uni-view",
{
staticClass: _vm._$g("12-" + $30, "sc"),
attrs: { _i: "12-" + $30 },
},
[
_c( _c(
"uni-view", "uni-view",
{ {
...@@ -10755,17 +10749,18 @@ var render = function () { ...@@ -10755,17 +10749,18 @@ var render = function () {
}, },
[_vm._v(_vm._$g("13-" + $30, "t0-0"))] [_vm._v(_vm._$g("13-" + $30, "t0-0"))]
), ),
_c(
"uni-view",
{
staticClass: _vm._$g("14-" + $30, "sc"),
class: _vm._$g("14-" + $30, "c"),
attrs: { _i: "14-" + $30 },
},
[_vm._v(_vm._$g("14-" + $30, "t0-0"))]
),
], ],
1 1
), ),
_c(
"uni-view",
{
staticClass: _vm._$g("14-" + $30, "sc"),
attrs: { _i: "14-" + $30 },
},
[_vm._v(_vm._$g("14-" + $30, "t0-0"))]
),
], ],
1 1
), ),
...@@ -10878,7 +10873,7 @@ if(false) {} ...@@ -10878,7 +10873,7 @@ if(false) {}
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ./node_modules/css-loader/dist/runtime/api.js */ 16); var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ./node_modules/css-loader/dist/runtime/api.js */ 16);
exports = ___CSS_LOADER_API_IMPORT___(false); exports = ___CSS_LOADER_API_IMPORT___(false);
// Module // Module
exports.push([module.i, "@charset \"UTF-8\";\r\n/**\r\n * 这里是uni-app内置的常用样式变量\r\n *\r\n * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量\r\n * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App\r\n *\r\n */\r\n/**\r\n * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能\r\n *\r\n * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件\r\n */\r\n/* 颜色变量 */\r\n/* 行为相关颜色 */\r\n/* 文字基本颜色 */\r\n/* 背景颜色 */\r\n/* 边框颜色 */\r\n/* 尺寸变量 */\r\n/* 文字尺寸 */\r\n/* 图片尺寸 */\r\n/* Border Radius */\r\n/* 水平间距 */\r\n/* 垂直间距 */\r\n/* 透明度 */\r\n/* 文章场景相关 */\n.timeline[data-v-0521783c] {\r\n position: relative;\r\n padding-left: 8px;\r\n padding-top: 5px;\n}\n.timeline[data-v-0521783c]::before {\r\n content: '';\r\n position: absolute;\r\n top: 8px;\r\n bottom: 0;\r\n width: 1px;\r\n background-color: #ccc;\r\n left: 10px;\r\n margin-left: -1px;\n}\n.timeline-item[data-v-0521783c] {\r\n position: relative;\r\n margin-bottom: 20px;\n}\n.timeline .timeline-item[data-v-0521783c]:last-child {\r\n margin-bottom: 10px;\n}\n.timeline-marker[data-v-0521783c] {\r\n position: absolute;\r\n top: 0;\r\n left: -6px;\r\n width: 10px;\r\n height: 10px;\r\n background-color: #333;\r\n border-radius: 50%;\r\n border: 2px solid #fff;\n}\n.timeline-marker--status1[data-v-0521783c] {\r\n background: white;\r\n border: 2px solid #333;\r\n color: #333;\n}\n.timeline-marker--status2[data-v-0521783c] {\r\n background: white;\r\n padding: 1px;\r\n border: 2px solid #2452D1;\r\n color: #2452D1;\n}\n.timeline-marker--status3[data-v-0521783c] {\r\n background: #e5e5e5;\r\n border: 2px solid white;\r\n color: #f0ad4e;\n}\n.timeline-marker--status4[data-v-0521783c] {\r\n background: white;\r\n border: 2px solid #4cd964;\r\n color: #dd524d;\n}\n.timeline-marker--status5[data-v-0521783c] {\r\n background: white;\r\n padding: 1px;\r\n border: 2px solid #4cd964;\r\n color: #4cd964;\n}\n.timeline-marker--status6[data-v-0521783c] {\r\n background: #FFF;\r\n border: 2px solid #ff5733;\r\n color: #ff5733;\n}\n.timeline-marker--status7[data-v-0521783c] {\r\n background: #e5e5e5;\r\n border: 2px solid white;\r\n color: #999;\n}\n.timeline-marker--colorstatus1[data-v-0521783c] {\r\n color: #333;\n}\n.timeline-marker--colorstatus2[data-v-0521783c] {\r\n color: #2452D1;\n}\n.timeline-marker--colorstatus3[data-v-0521783c] {\r\n color: #f0ad4e;\n}\n.timeline-marker--colorstatus4[data-v-0521783c] {\r\n color: #dd524d;\n}\n.timeline-marker--colorstatus5[data-v-0521783c] {\r\n color: #4cd964;\n}\n.timeline-marker--colorstatus6[data-v-0521783c] {\r\n color: #ff5733;\n}\n.timeline-marker--colorstatus7[data-v-0521783c] {\r\n color: #999;\n}\n.timeline-content[data-v-0521783c] {\r\n padding: 10px;\r\n background: #FFF;\r\n border-radius: 5px;\r\n position: relative;\r\n left: 15px;\r\n width: calc(100vw - 78px);\n}\n.timeline-header[data-v-0521783c] {\r\n display: flex;\r\n align-items: center;\n}\n.timeline-avatar[data-v-0521783c] {\r\n width: 30px;\r\n height: 30px;\r\n border-radius: 50%;\r\n margin-right: 10px;\n}\n.timeline-username[data-v-0521783c] {\r\n /* font-weight: bold; */\n}\n.timeline-title[data-v-0521783c] {\r\n font-size: 16px;\r\n font-weight: 500;\r\n margin-right: 5px;\n}\n.timeline-date[data-v-0521783c] {\r\n font-size: 14px;\r\n color: #888;\n}\n.timeline-description[data-v-0521783c] {\r\n font-size: 14px;\n}\r\n", ""]); exports.push([module.i, "@charset \"UTF-8\";\r\n/**\r\n * 这里是uni-app内置的常用样式变量\r\n *\r\n * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量\r\n * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App\r\n *\r\n */\r\n/**\r\n * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能\r\n *\r\n * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件\r\n */\r\n/* 颜色变量 */\r\n/* 行为相关颜色 */\r\n/* 文字基本颜色 */\r\n/* 背景颜色 */\r\n/* 边框颜色 */\r\n/* 尺寸变量 */\r\n/* 文字尺寸 */\r\n/* 图片尺寸 */\r\n/* Border Radius */\r\n/* 水平间距 */\r\n/* 垂直间距 */\r\n/* 透明度 */\r\n/* 文章场景相关 */\n.timeline[data-v-0521783c] {\r\n position: relative;\r\n padding-left: 8px;\r\n padding-top: 5px;\n}\n.timeline[data-v-0521783c]::before {\r\n content: '';\r\n position: absolute;\r\n top: 8px;\r\n bottom: 0;\r\n width: 1px;\r\n background-color: #ccc;\r\n left: 10px;\r\n margin-left: -1px;\n}\n.timeline-item[data-v-0521783c] {\r\n position: relative;\r\n margin-bottom: 20px;\n}\n.timeline .timeline-item[data-v-0521783c]:last-child {\r\n margin-bottom: 10px;\n}\n.timeline-marker[data-v-0521783c] {\r\n position: absolute;\r\n top: 38px;\r\n left: -6px;\r\n width: 10px;\r\n height: 10px;\r\n background-color: #333;\r\n border-radius: 50%;\r\n border: 2px solid #fff;\n}\n.timeline-marker--status1[data-v-0521783c] {\r\n background: white;\r\n border: 2px solid #333;\r\n color: #333;\n}\n.timeline-marker--status2[data-v-0521783c] {\r\n background: white;\r\n padding: 1px;\r\n border: 2px solid #2452D1;\r\n color: #2452D1;\n}\n.timeline-marker--status3[data-v-0521783c] {\r\n background: #e5e5e5;\r\n border: 2px solid white;\r\n color: #f0ad4e;\n}\n.timeline-marker--status4[data-v-0521783c] {\r\n background: white;\r\n border: 2px solid #4cd964;\r\n color: #dd524d;\n}\n.timeline-marker--status5[data-v-0521783c] {\r\n background: white;\r\n padding: 1px;\r\n border: 2px solid #4cd964;\r\n color: #4cd964;\n}\n.timeline-marker--status6[data-v-0521783c] {\r\n background: #FFF;\r\n border: 2px solid #ff5733;\r\n color: #ff5733;\n}\n.timeline-marker--status7[data-v-0521783c] {\r\n background: #e5e5e5;\r\n border: 2px solid white;\r\n color: #999;\n}\n.timeline-marker--colorstatus1[data-v-0521783c] {\r\n color: #333;\n}\n.timeline-marker--colorstatus2[data-v-0521783c] {\r\n color: #2452D1;\n}\n.timeline-marker--colorstatus3[data-v-0521783c] {\r\n color: #f0ad4e;\n}\n.timeline-marker--colorstatus4[data-v-0521783c] {\r\n color: #dd524d;\n}\n.timeline-marker--colorstatus5[data-v-0521783c] {\r\n color: #4cd964;\n}\n.timeline-marker--colorstatus6[data-v-0521783c] {\r\n color: #ff5733;\n}\n.timeline-marker--colorstatus7[data-v-0521783c] {\r\n color: #999;\n}\n.timeline-content[data-v-0521783c] {\r\n padding: 10px;\r\n background: #FFF;\r\n border-radius: 5px;\r\n position: relative;\r\n left: 15px;\r\n width: calc(100vw - 78px);\n}\n.timeline-header[data-v-0521783c] {\r\n display: flex;\r\n align-items: center;\n}\n.timeline-avatar[data-v-0521783c] {\r\n width: 30px;\r\n height: 30px;\r\n border-radius: 50%;\r\n margin-right: 10px;\n}\n.timeline-username[data-v-0521783c] {\r\n /* font-weight: bold; */\r\n width: 100%;\n}\n.timeline-uleft[data-v-0521783c] {\r\n display: grid;\r\n grid-template-columns: 40% 60%;\r\n grid-template-rows: 1fr;\r\n justify-content: space-between;\n}\n.timeline-uright[data-v-0521783c] {\r\n display: grid;\r\n grid-template-columns: 60% 40%;\r\n grid-template-rows: 1fr;\r\n justify-content: space-between;\n}\n.timeline-uright .desctit[data-v-0521783c] {\r\n color: #888;\n}\n.timeline-title[data-v-0521783c] {\r\n font-size: 16px;\r\n font-weight: 500;\r\n margin-right: 5px;\n}\n.timeline-date[data-v-0521783c] {\r\n font-size: 14px;\r\n color: #888;\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\n}\n.timeline-description[data-v-0521783c] {\r\n font-size: 14px;\n}\r\n", ""]);
// Exports // Exports
module.exports = exports; module.exports = exports;
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或