开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第2天，点击查看活动详情
我们再来写一下饼状图和折线图。
在components文件夹中新建一个PieChart.vue
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
title: {
text: '分类占比',
left: 'left'
},
tooltip: {
trigger: 'item'
},
series: [
{
name: 'Access From',
type: 'pie',
radius: '50%',
data: [
{ value: 1048, name: 'Search Engine' },
{ value: 735, name: 'Direct' },
{ value: 580, name: 'Email' },
{ value: 484, name: 'Union Ads' },
{ value: 300, name: 'Video Ads' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
}
}
}
</script>
再新建一个LineChart.vue
<template>
<div :class="className" :style="{height:height,width:width}" />
</template>
<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
export default {
props: {
className: {
type: String,
default: 'chart'
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '300px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.$nextTick(() => {
this.initChart()
})
},
beforeDestroy() {
if (!this.chart) {
return
}
this.chart.dispose()
this.chart = null
},
methods: {
initChart() {
this.chart = echarts.init(this.$el, 'macarons')
this.chart.setOption({
title: {
text: '访问量'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}
]
})
}
}
}
</script>
再去主页将这两个引入。
index.vue完整代码如下
<template>
<div class="dashboard-container">
<panel-group ></panel-group>
<!-- 数据分析 -->
<el-row :gutter="32" class="row-chart">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<line-chart />
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import PanelGroup from './components/PanelGroup'
import BarChart from './components/BarChart'
import PieChart from './components/PieChart'
import LineChart from './components/LineChart'
export default {
name: 'Dashboard',
components: {
PanelGroup,
BarChart,
PieChart,
LineChart
},
data() {
return {
}
},
methods: {
},
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard {
&-container {
padding: 32px;
background-color: #f0f2f5;
}
}
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
.row-chart{
margin-top: 30px;
}
</style>
然后我们看一下效果
是不是感觉还挺哇塞的，其实那种看着非常高大上的大屏展示就是这种画出来的，我后边应该会写一篇如何制作大屏的页面的文章，大家可以等待一下。
现在我们的首页是不是有点样子了，越来越完善了，是有点系统的样子了。
接下来我们再美化一下首页，再添加一点小功能。
1、添加日历
大家可以参考这个文章添加日历，以下就是我参照实现的，稍微做了修改。
参考文章：vue日历插件vue-calendar
- 首先安装一下日历的组件
npm i vue-calendar-component --save
如果安装失败，可以试试以下的命令
cnpm i vue-calendar-component --save
- 引入组件
在我们的首页引入一下日历的组件
import Calendar from 'vue-calendar-component';
然后写绘制日历的代码
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<div class="con">
<div class="now-data-myself">
<div class="now-data-myself-time">{{ date }}</div>
<div class="now-data-myself-week">{{ week }}</div>
</div>
<Calendar
v-on:choseDay="clickDay"
v-on:changeMonth="changeDate"
v-on:isToday="clickToday"
></Calendar>
</div>
</div>
</el-col>
components: {
PanelGroup,
BarChart,
PieChart,
LineChart,
Calendar
},
data() {
return {
date: "",
week: "",
}
},
created() {
var now = new Date();
this.date = now.getDate();//得到日期
var day = now.getDay();//得到周几
var arr_week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
this.week = arr_week[day];
},
methods: {
clickDay(data) {},
changeDate(data) {},
clickToday(data) {}
},
CSS样式：
.now-data-myself {
width: 40%;
position: absolute;
border-right: 1px solid rgba(227, 227, 227, 0.6);
}
.con {
position: relative;
max-width: 400px;
margin: auto;
}
.con .wh_content_all {
background: transparent !important;
}
.wh_top_changge li {
color: #F56C6C !important;
font-size: 15px !important;
}
.wh_content_item, .wh_content_item_tag {
color: #303133 !important;
}
.wh_content_item .wh_isToday {
background: #00d985 !important;
color: #fff !important;
}
.wh_content_item .wh_chose_day {
background: #409EFF !important;
color: #ffff !important;
}
.wh_item_date:hover {
background: rgb(217, 236, 255) !important;
border-radius: 100px !important;
color: rgb(102, 177, 255) !important;
}
.wh_jiantou1[data-v-2ebcbc83] {
border-top: 2px solid #909399;
border-left: 2px solid #909399;
width: 7px;
height: 7px;
}
.wh_jiantou2[data-v-2ebcbc83] {
border-top: 2px solid #909399;
border-right: 2px solid #909399;
width: 7px;
height: 7px;
}
.wh_top_tag[data-v-2ebcbc83] {
color: #409EFF;
border-top: 1px solid rgba(227, 227, 227, 0.6);
border-bottom: 1px solid rgba(227, 227, 227, 0.6);
}
.wh_container[data-v-2ebcbc83] {
max-width: 400px;
}
.wh_top_changge[data-v-2ebcbc83] {
display: flex;
width: 50%;
margin-left: 43%;
}
.now-data-myself-time {
color: #F56C6C;
font-size: 28px;
margin-left:60px;
height: 33px;
font-family: "Helvetica Neue";
}
.now-data-myself-week {
margin-left:60px;
font-size: 10px;
color: #909399;
}
.wh_top_changge .wh_content_li[data-v-2ebcbc83] {
font-family: Helvetica;
}
这里我遇到了一个坑，修改的日历的样式没有效果，最终看到css样式的地方加了scoped
<style rel="stylesheet/scss" lang="scss" scoped>
我们把这个去掉即可，想知道什么原因的可以去学习一下。
然后看一下我们的页面。
2、词云
接下来我们来写一下这个词云，这个主要是美化我们的页面，做一些特效使用，也多学一些常用的小功能。
我这个是在网上找了一个词云的代码，我将它封装成了一个组件，直接在首页引用即可。
在components文件夹下面新建一个WordCloud.vue文件
<template>
<section class="cloud-bed">
<div class="cloud-box">
<span
v-for="(item, index) in dataList"
:key="index"
@click="getDataInfo(item)"
:style="{color:item.color,background:item.bgColor}"
>
{{ item.name }}
</span>
</div>
</section>
</template>
<script>
export default {
name: "word-cloud",
data() {
return {
timer: 10, // 球体转动速率
radius: 0, // 词云球体面积大小
dtr: Math.PI/180, //鼠标滑过球体转动速度
active: false, // 默认加载是否开启转动
lasta: 0, // 上下转动
lastb: 0.5, // 左右转动
distr: true,
tspeed: 1, // 鼠标移动上去时球体转动
mouseX: 0,
mouseY: 0,
tagAttrList: [],
tagContent: null,
cloudContent: null,
sinA: '',
cosA: '',
sinB: '',
cosB: '',
sinC: '',
cosC: '',
dataList: [
{
name: '页面卡顿\白屏',
value: '1',
bgColor:'rgb(57, 193, 207,0.12)',
color:'#39c1cf',
},
{
name: '闪退',
value: '8',
bgColor:'rgb(66, 105, 245,0.12)',
color:'#4269f5',
},
{
name: '登录问题',
value: '9',
bgColor:'rgb(184, 107, 215,0.12)',
color:'#b86bd7',
},
{
name: '功能bug',
value: '3',
bgColor:'rgb(243, 84, 83,0.12)',
color:'#f35453',
},
{
name: '无法收到短信',
value: '6',
bgColor:'rgb(250, 116, 20,0.12)',
color:'#FA7414',
},
{
name: '人脸/指纹认证失败',
value: '10',
bgColor:'rgb(255, 171, 30,0.12)',
color:'#FFAB1E',
},
{
name: '功能建议',
value: '2',
bgColor:'rgb(136, 104, 217,0.12)',
color:'#8868D9',
},
{
name: 'UI/UX',
value: '5',
bgColor:'rgb(42, 184, 230,0.12)',
color:'#2AB8E6',
},
{
name: '导航性',
value: '7',
bgColor:'rgb(117, 133, 162,0.12)',
color:'#7585A2',
},
]
}
},
mounted () {
this.$nextTick(() => {
this.radius = document.querySelector('.cloud-box').offsetWidth / 2
this.initWordCloud()
})
},
beforeDestroy () {
clearInterval(this.timer)
},
methods:{
// 获取点击文本信息
getDataInfo (item) {
console.log(item, 'item')
},
initWordCloud () {
this.cloudContent = document.querySelector('.cloud-box');
this.tagContent = this.cloudContent.getElementsByTagName('span');
for (let i = 0; i < this.tagContent.length; i++) {
let tagObj = {};
tagObj.offsetWidth = this.tagContent[i].offsetWidth;
tagObj.offsetHeight = this.tagContent[i].offsetHeight;
this.tagAttrList.push(tagObj);
}
this.sineCosine(0, 0, 0);
this.positionAll();
this.cloudContent.onmouseover = () => {
this.active=true;
};
this.cloudContent.onmouseout = () => {
this.active=false;
};
this.cloudContent.onmousemove = (ev) => {
let oEvent = window.event || ev;
this.mouseX = oEvent.clientX - (this.cloudContent.offsetLeft + this.cloudContent.offsetWidth/2);
this.mouseY = oEvent.clientY - (this.cloudContent.offsetTop + this.cloudContent.offsetHeight/2);
this.mouseX/= 5;
this.mouseY/= 5;
};
setInterval(this.update, this.timer);
},
positionAll () {
let phi = 0;
let theta = 0;
let max = this.tagAttrList.length;
let aTmp = [];
let oFragment = document.createDocumentFragment();
//随机排序
for (let i=0; i < this.tagContent.length; i++) {
aTmp.push(this.tagContent[i]);
}
aTmp.sort(() => {
return Math.random() < 0.5 ? 1 : -1;
});
for (let i = 0; i < aTmp.length; i++) {
oFragment.appendChild(aTmp[i]);
}
this.cloudContent.appendChild(oFragment);
for(let i = 1; i < max + 1; i++){
if (this.distr) {
phi = Math.acos(-1 + (2 * i - 1) / max);
theta = Math.sqrt(max * Math.PI) * phi;
} else {
phi = Math.random() * (Math.PI);
theta = Math.random() * (2 * Math.PI);
}
//坐标变换
this.tagAttrList[i-1].cx = this.radius * Math.cos(theta) * Math.sin(phi);
this.tagAttrList[i-1].cy = this.radius * Math.sin(theta) * Math.sin(phi);
this.tagAttrList[i-1].cz = this.radius * Math.cos(phi);
this.tagContent[i-1].style.left = this.tagAttrList[i-1].cx + this.cloudContent.offsetWidth / 2 - this.tagAttrList[i-1].offsetWidth / 2 + 'px';
this.tagContent[i-1].style.top = this.tagAttrList[i-1].cy + this.cloudContent.offsetHeight / 2 - this.tagAttrList[i-1].offsetHeight / 2 + 'px';
}
},
update () {
let angleBasicA;
let angleBasicB;
if (this.active) {
angleBasicA = (-Math.min(Math.max(-this.mouseY, -200 ), 200) / this.radius) * this.tspeed;
angleBasicB = (Math.min(Math.max(-this.mouseX, -200 ), 200) / this.radius) * this.tspeed;
} else {
angleBasicA = this.lasta * 0.98;
angleBasicB = this.lastb * 0.98;
}
//默认转动是后是否需要停下
// lasta=a;
// lastb=b;
// if(Math.abs(a)<=0.01 && Math.abs(b)<=0.01)
// {
// return;
// }
this.sineCosine(angleBasicA, angleBasicB, 0);
for(let j = 0; j < this.tagAttrList.length; j++) {
let rx1 = this.tagAttrList[j].cx;
let ry1 = this.tagAttrList[j].cy * this.cosA + this.tagAttrList[j].cz * (-this.sinA);
let rz1 = this.tagAttrList[j].cy * this.sinA + this.tagAttrList[j].cz * this.cosA;
let rx2 = rx1 * this.cosB + rz1 * this.sinB;
let ry2 = ry1;
let rz2 = rx1 * (-this.sinB) + rz1 * this.cosB;
let rx3 = rx2 * this.cosC + ry2 * (-this.sinC);
let ry3 = rx2 * this.sinC + ry2 * this.cosC;
let rz3 = rz2;
this.tagAttrList[j].cx = rx3;
this.tagAttrList[j].cy = ry3;
this.tagAttrList[j].cz = rz3;
let per = 350 / (350 + rz3);
this.tagAttrList[j].x = rx3 * per - 2;
this.tagAttrList[j].y = ry3 * per;
this.tagAttrList[j].scale = per;
this.tagAttrList[j].alpha = per;
this.tagAttrList[j].alpha = (this.tagAttrList[j].alpha - 0.6) * (10/6);
}
this.doPosition();
this.depthSort();
},
doPosition() {
let len = this.cloudContent.offsetWidth/2;
let height = this.cloudContent.offsetHeight/2;
for (let i=0;i < this.tagAttrList.length;i++) {
this.tagContent[i].style.left = this.tagAttrList[i].cx + len - this.tagAttrList[i].offsetWidth/2 + 'px';
this.tagContent[i].style.top = this.tagAttrList[i].cy + height - this.tagAttrList[i].offsetHeight/2 + 'px';
// this.tagContent[i].style.fontSize = Math.ceil(12 * this.tagAttrList[i].scale/2) + 8 + 'px';
this.tagContent[i].style.fontSize = Math.ceil(12 * this.tagAttrList[i].scale/2) +2 + 'px';
this.tagContent[i].style.filter = "alpha(opacity="+100 * this.tagAttrList[i].alpha+")";
this.tagContent[i].style.opacity = this.tagAttrList[i].alpha;
}
},
depthSort(){
let aTmp = [];
for (let i = 0; i < this.tagContent.length; i++) {
aTmp.push(this.tagContent[i]);
}
aTmp.sort((item1, item2) => item2.cz - item1.cz);
for (let i = 0; i < aTmp.length; i++) {
aTmp[i].style.zIndex=i;
}
},
sineCosine (a, b, c) {
this.sinA = Math.sin(a * this.dtr);
this.cosA = Math.cos(a * this.dtr);
this.sinB = Math.sin(b * this.dtr);
this.cosB = Math.cos(b * this.dtr);
this.sinC = Math.sin(c * this.dtr);
this.cosC = Math.cos(c * this.dtr);
}
}
};
</script>
<style scoped>
.cloud-bed {
width: 250px;
height: 270px;
margin: auto;
}
.cloud-box{
position:relative;
margin:20px auto 0px;
width: 100%;
height: 100%;
background: #00000000;
}
.cloud-box span{
position: absolute;
padding: 3px 6px;
top: 0px;
font-weight: bold;
text-decoration:none;
left:0px;
background-image: linear-gradient(to bottom, red, #fff);
background-clip: text;
color: transparent;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
/* line-height: 50px;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis; */
}
</style>
然后在首页中将组件引进来，和之前的图表引入一样。
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<div class="e-title">文章标签统计</div>
<word-cloud />
</div>
</el-col>
引入组件
import WordCloud from './components/WordCloud.vue'
components: {
PanelGroup,
BarChart,
PieChart,
LineChart,
Calendar,
WordCloud
},
然后运行一下项目，我们看一下页面
看着是不是还挺高大上的。这个功能模块添加完成了，最后一个我们写一下公告的展示
3、公告
在首页添加了公告的信息，方便我们及时的查看，但只展示最近发的前四条公告，其余的还是要去公告列表中去查看，这个就比较简单了，我们直接引用element-ui的组件即可。
我选择了折叠面板来实现，感觉还挺符合这个通知公告的功能实现。
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<div class="e-title">最新公告</div>
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="一致性 Consistency" name="1">
<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
<div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
</el-collapse-item>
<el-collapse-item title="反馈 Feedback" name="2">
<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
</el-collapse-item>
<el-collapse-item title="效率 Efficiency" name="3">
<div>简化流程：设计简洁直观的操作流程；</div>
<div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
<div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
</el-collapse-item>
<el-collapse-item title="可控 Controllability" name="4">
<div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
<div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
</el-collapse-item>
</el-collapse>
里面的内容暂时先不修改，我们下一篇处理后端的接口，再统一对接后端接口数据。
好啦，首页的功能基本上都写完了，我让大家看一下完整的页面效果
这个是不是很哇塞，感觉很beautiful。
首页完整代码如下：
<template>
<div class="dashboard-container">
<panel-group ></panel-group>
<!-- 数据分析 -->
<el-row :gutter="32" class="row-chart">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<bar-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<pie-chart />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<line-chart />
</div>
</el-col>
</el-row>
<!-- 功能 -->
<el-row :gutter="32" class="row-chart">
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<div class="e-title">文章标签统计</div>
<word-cloud />
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<div class="e-title">最新公告</div>
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="一致性 Consistency" name="1">
<div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
<div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
</el-collapse-item>
<el-collapse-item title="反馈 Feedback" name="2">
<div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
</el-collapse-item>
<el-collapse-item title="效率 Efficiency" name="3">
<div>简化流程：设计简洁直观的操作流程；</div>
<div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
<div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
</el-collapse-item>
<el-collapse-item title="可控 Controllability" name="4">
<div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
<div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
</el-collapse-item>
</el-collapse>
</div>
</el-col>
<el-col :xs="24" :sm="24" :lg="8">
<div class="chart-wrapper">
<div class="con">
<div class="now-data-myself">
<div class="now-data-myself-time">{{ date }}</div>
<div class="now-data-myself-week">{{ week }}</div>
</div>
<Calendar
v-on:choseDay="clickDay"
v-on:changeMonth="changeDate"
v-on:isToday="clickToday"
></Calendar>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script>
import PanelGroup from './components/PanelGroup'
import BarChart from './components/BarChart'
import PieChart from './components/PieChart'
import LineChart from './components/LineChart'
import Calendar from 'vue-calendar-component'
import WordCloud from './components/WordCloud.vue'
export default {
name: 'Dashboard',
components: {
PanelGroup,
BarChart,
PieChart,
LineChart,
Calendar,
WordCloud
},
data() {
return {
date: "",
week: "",
activeName: '1'
}
},
created() {
var now = new Date();
this.date = now.getDate();//得到日期
var day = now.getDay();//得到周几
var arr_week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
this.week = arr_week[day];
},
methods: {
clickDay(data) {},
changeDate(data) {},
clickToday(data) {}
},
}
</script>
<style rel="stylesheet/scss" lang="scss">
.dashboard {
&-container {
padding: 32px;
background-color: #f0f2f5;
}
}
.chart-wrapper {
background: #fff;
padding: 16px 16px 0;
margin-bottom: 32px;
}
.row-chart{
margin-top: 30px;
}
.now-data-myself {
width: 40%;
position: absolute;
border-right: 1px solid rgba(227, 227, 227, 0.6);
}
.con {
position: relative;
max-width: 400px;
margin: auto;
}
.con .wh_content_all {
background: transparent !important;
}
.wh_top_changge li {
color: #F56C6C !important;
font-size: 15px !important;
}
.wh_content_item, .wh_content_item_tag {
color: #303133 !important;
}
.wh_content_item .wh_isToday {
background: #00d985 !important;
color: #fff !important;
}
.wh_content_item .wh_chose_day {
background: #409EFF !important;
color: #ffff !important;
}
.wh_item_date:hover {
background: rgb(217, 236, 255) !important;
border-radius: 100px !important;
color: rgb(102, 177, 255) !important;
}
.wh_jiantou1[data-v-2ebcbc83] {
border-top: 2px solid #909399;
border-left: 2px solid #909399;
width: 7px;
height: 7px;
}
.wh_jiantou2[data-v-2ebcbc83] {
border-top: 2px solid #909399;
border-right: 2px solid #909399;
width: 7px;
height: 7px;
}
.wh_top_tag[data-v-2ebcbc83] {
color: #409EFF;
border-top: 1px solid rgba(227, 227, 227, 0.6);
border-bottom: 1px solid rgba(227, 227, 227, 0.6);
}
.wh_container[data-v-2ebcbc83] {
max-width: 400px;
}
.wh_top_changge[data-v-2ebcbc83] {
display: flex;
width: 50%;
margin-left: 43%;
}
.now-data-myself-time {
color: #F56C6C;
font-size: 28px;
margin-left:60px;
height: 33px;
font-family: "Helvetica Neue";
}
.now-data-myself-week {
margin-left:60px;
font-size: 10px;
color: #909399;
}
.wh_top_changge .wh_content_li[data-v-2ebcbc83] {
font-family: Helvetica;
}
</style>
