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

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

效果图如下

页面代码

代码语言：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;
}

git 程序 日志

0 人点赞