1.在head-vue中的homehead的样式加入以下代码,使得上面的背景颜色变成渐变色
创建一个从左上角开始的径向渐变。 //第二行同此
渐变的中心位于元素左上角的50%高度和200px宽度的位置。
渐变的起始颜色是#D5F8FC,然后渐变到透明。
background:
radial-gradient(50% 200px at left top,#D5f8fc,transparent),
radial-gradient(50% 200px at right top,#D3CBFC,transparent);
2.去官网下载导入uni-dateformat 日期格式化的组件到项目中,并重新启动hbuilder,并修改以前代码的年月日的空白如下,format代表具体格式取值当前时间,可以看官方插件文档
<view class="time">
<view class="left">
<uni-dateformat :date="Date.now()" format="dd"></uni-dateformat>
</view>
<view class="right">
<view class="year">
<uni-dateformat :date="Date.now()" format="yyyy年MM月"></uni-dateformat>
</view>
</view>
</view>
3.修改以前星期的空白部分:在utils中加入tool.js文件,并加入以下代码,再在head-vue中引用(先import {getWeekday} from"../../utils/tools.js"调用,然后再此项的view中加入{{getWeekday()}}
)
export function getWeekday() {
const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const date = new Date();
const dayOfWeek = date.getDay();
return days[dayOfWeek];
}
注意加入export,公开函数,才能调用