前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序更新日志记录,附上效果图以及实现代码

小程序更新日志记录,附上效果图以及实现代码

作者头像
子润先生
修改2021-06-25 10:34:57
6820
修改2021-06-25 10:34:57
举报

简介 项目更新都有日志记录,例如git提交日志,有效的记录程序有什么变化,添加或修改了那些功能。更新的时间,提交的版本。

效果图如下

383df03db0e4c80abc5ae71065a3e6ss9.jpg
383df03db0e4c80abc5ae71065a3e6ss9.jpg

页面代码

代码语言:javascript
复制
<view class="header">
	<view class="header-icon"></view>
	<view class="header-v">v1.0.8<text class="header-date">2020/9/28</text></view>
</view>
<view class="content-box" :style="{width: screenWidth - 30 + 'px'}">
	<view class="content-text">①<text class="content-type-icon">A</text>
		新增更新日志的界面
	</view>
	<view class="content-text">②<text class="content-type-icon">U</text>
		调整代码格式,美化代码
	</view>
</view>

注意:screenWidth是屏幕的宽度

实现样式

代码语言:javascript
复制
.header{
	width:100vw;
	height:20px;
	line-height: 30px;
}
.header-icon{
	width: 8px;
	box-shadow: 0px 0px 5px 2px #33ccff;
	height:8px;
	border-radius:50%;
	background: #009ad6;
	margin-left: 20px;
	margin-top: 10px;
	float: left;
}
.header-v{
	width: 10px;
	margin-left: 10px;
	height: 10px;
	color:#009ad6 ;
	float: left;
	font-size: 28rpx;
	font-weight: bold;
}
.header-date{
	color:#ccc ;
	margin-left: 15px;
	font-size: 26rpx;
}
.content-box {
	border-left: 1px solid #ccc;
	margin-left: 24px;
	padding-bottom: 20px;
	margin-top: 5px;
}
.content-text {
	padding-top: 20px;
	font-size: 25rpx;
	color: #666;
	margin-left: 10px;
	padding-right: 10px;
}
.content-type-icon {
	color: #666;
	background: #eee;
	padding: 1px 7px;
	border-radius: 5px;
	margin: 0 5px;
}

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档