9、公用面板樣式

所有的面板的基礎樣式是一致的，提前布局好。

• 面板 .panel ：box-sizing，邊框圖，大小，定位【51 38 20 132】
• 容器 .inner：padding：24，36，定位外部拉寬
• 標題 h3：20px，顏色

/* 面板樣式 */ .panel{box-sizing: border-box;border: 2rem solid transparent;border-width: 2.125rem 1.583rem 0.833rem 5.5rem;border-image: url(../images/border.png) 51 38 21 132;margin-bottom: 0.833rem;position: relative; } .panel .inner{padding: 1rem 1.5rem;position: absolute;top: -2.125rem;right: -1.583rem;bottom: -0.833rem;left: -5.5rem; } .panel h3{font-size: 0.833rem;color: #fff; }

10、概覽區域-布局

html結構：

<div class="overview panel"><div class="inner"><div class="item"><h4>2,190</h4><span><i class="icon-dot" style="color: #006cff"></i>設備總數</span></div><div class="item"><h4>190</h4><span><i class="icon-dot" style="color: #6acca3"></i>季度新增</span></div><div class="item"><h4>3,001</h4><span><i class="icon-dot" style="color: #6acca3"></i>運營設備</span></div><div class="item"><h4>108</h4><span><i class="icon-dot" style="color: #ed3f35"></i>異常設備</span></div></div></div>

樣式描述：

• 容器高度 110px
• h4字體 28px #fff 左邊距 4.8px 下間隙 8px
• span字體 16px #4c9bfd
• 注意：引入圖標地址（fonts文件夾里面的css）

/* 概覽區域 */ .overview{height: 4.583rem; } .overview .inner{display: flex;justify-content: space-between; } .overview h4{font-size: 1.167rem;padding-left: 0.2rem;color: #fff;margin-bottom: 0.333rem } .overview span{font-size: 0.667rem;color: #4c9bfd; }

11、監控區域-布局

html結構：

<!--監控--><div class="monitor panel"><div class="inner"><div class="tabs"><a href="javascript:;" data-index="0" class="active">故障設備監控</a><a href="javascript:;" data-index="1">異常設備監控</a></div><div class="content" style="display: block;"><div class="head"><span class="col">故障時間</span><span class="col">設備地址</span><span class="col">異常代碼</span></div><div class="marquee-view"><div class="marquee"><div class="row"><span class="col">20180701</span><span class="col">11北京市昌平西路金燕龍寫字樓</span><span class="col">1000001</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190601</span><span class="col">北京市昌平區城西路金燕龍寫字樓</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190704</span><span class="col">北京市昌平區建材城西路金燕龍寫字樓</span><span class="col">1000003</span><span class="icon-dot"></span></div><div class="row"><span class="col">20180701</span><span class="col">北京市昌平區建路金燕龍寫字樓</span><span class="col">1000004</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190701</span><span class="col">北京市昌平區建材城西路金燕龍寫字樓</span><span class="col">1000005</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190701</span><span class="col">北京市昌平區建材城西路金燕龍寫字樓</span><span class="col">1000006</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190701</span><span class="col">北京市昌平區建西路金燕龍寫字樓</span><span class="col">1000007</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190701</span><span class="col">北京市昌平區建材城西路金燕龍寫字樓</span><span class="col">1000008</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190701</span><span class="col">北京市昌平區建材城西路金燕龍寫字樓</span><span class="col">1000009</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190710</span><span class="col">北京市昌平區建材城西路金燕龍寫字樓</span><span class="col">1000010</span><span class="icon-dot"></span></div></div></div></div><div class="content"><div class="head"><span class="col">異常時間</span><span class="col">設備地址</span><span class="col">異常代碼</span></div><div class="marquee-view"><div class="marquee"><div class="row"><span class="col">20190701</span><span class="col">北京市昌平區建材城西路金燕龍寫字樓</span><span class="col">1000001</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190701</span><span class="col">北京市昌平區建材城西路金燕龍寫字樓</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190703</span><span class="col">北京市昌平區建材城西路金燕龍寫字樓</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190704</span><span class="col">北京市昌平區建材城西路金燕龍寫字樓</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190705</span><span class="col">北京市昌平區建材城西路金燕龍寫字樓</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190706</span><span class="col">北京市昌平區建材城西路金燕龍寫字樓</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190707</span><span class="col">北京市昌平區建材城西路金燕龍寫字樓</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190708</span><span class="col">北京市昌平區建材城西路金燕龍寫字樓</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190709</span><span class="col">北京市昌平區建材城西路金燕龍寫字樓</span><span class="col">1000002</span><span class="icon-dot"></span></div><div class="row"><span class="col">20190710</span><span class="col">北京市昌平區建材城西路金燕龍寫字樓</span><span class="col">1000002</span><span class="icon-dot"></span></div></div></div></div></div></div>

結構解釋：

• .tabs 標簽選項 加上active激活選項 默認激活第一個選項
• .content 切換內容 加上style="display: block;"顯示內容 默認激活第一個內容

樣式描述：

• .inner 容器內間距 24px 0
• .tabs 容器內間距 0 36px
  • a 容器 顏色： #1950c4 內間距：0 27px 字體：18px
  • 第一個a容器 去除左側內間距 加上右側2px寬度邊框#00f2f1
  • 激活的時候 顏色白色
• .content容器
  • 占滿剩余高度 flex:1
  • 默認隱藏
• .head 容器
  • 行高 1.05 背景 rgba(255, 255, 255, 0.1) 內間距 12px 36px 顏色 #68d8fe 字體大小 14px
• row 容器
  • 行高 1.05 內間距 12px 36px 顏色 #68d8ff 字體大小 12px
  • .icon-dot 字體圖標 絕對定位 左邊0.64rem 透明度0
  • 鼠標經過后：背景 rgba(255, 255, 255, 0.1) 透明度1
• col容器
  • 寬度：3.2rem 8.4rem 3.2rem
  • 第二個col 一行不換行 溢出 省略

/* 監控 */.monitor{height: 20rem;}.monitor .inner{padding: 1rem 0;display: flex;flex-direction: column;}.monitor .tabs{padding: 0 1.5rem;margin-bottom: 0.75rem;}.monitor .tabs a{color: #1950c4;font-size: 0.75rem;padding: 0 1.125rem;}.monitor .tabs a:first-child{border-right: 0.083rem solid #00f2f1;padding-left: 0;}.monitor .tabs a.active{color: #fff;}.monitor .content{flex: 1;display: none;position: relative;}.monitor .head{background: rgba(255, 255, 255, 0.1);font-size: 0.583rem;padding: 0.5rem 1.5rem;color: #68d8fe;display: flex;justify-content: space-between;line-height: 1.05;}.monitor .col:nth-child(1) {width: 3.2rem;}.monitor .col:nth-child(2) {width: 8.4rem;/* 不換行 一行省略*/white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.monitor .col:nth-child(3) {width: 3.2rem;}.monitor .marquee-view{position: absolute;top: 1.6rem;bottom: 0; width: 100%; overflow: hidden; }.monitor .row{line-height: 1.05;padding: 0.5rem 1.5rem;color: #61a8ff;font-size: 0.5rem;position: relative;display: flex;justify-content: space-between; } .monitor .row:hover{color:#68d8ff;background: rgba(255, 255, 255, 0.1); } .monitor .row:hover .icon-dot{opacity: 1; }.monitor .icon-dot{position: absolute;left: 0.64rem;opacity: 0; } .monitor .marquee-view{position: absolute;top: 1.6rem;bottom: 0; width: 100%; overflow: hidden;}.monitor .row{line-height: 1.05;padding: 0.5rem 1.5rem;color: #61a8ff;font-size: 0.5rem;position: relative;display: flex;justify-content: space-between;}.monitor .row:hover{color:#68d8ff;background: rgba(255, 255, 255, 0.1);}.monitor .row:hover .icon-dot{opacity: 1;}.monitor .icon-dot{position: absolute;left: 0.64rem;opacity: 0;}

12、監控區域-效果

切換功能：

• 綁定 標簽頁點擊 事件
• 點擊的時候獲取data-index的值
• 當前容器加active其他容器移除active
• index對應的內容容器顯示其他容器隱藏

// 切換$('.monitor').on('click','.tabs a', function(){$(this).addClass('active').siblings().removeClass('active')$('.monitor .content').eq(this.dataset.index).show().siblings('.content').hide()})

動畫功能：

• 實現思路：
  • 先克隆列表，追加在后面
  • marquee-view 占滿剩余高度，溢出隱藏
    • 絕對定位，top 1.6rem bottom 0
    • 寬度100%，溢出隱藏
  • 使用animation實現動畫
  • 使用 translateY 向上位移 50%
  • 動畫時間15s，勻速播放，循環執行。

js代碼：

// 動畫$('.marquee').each(function(){var $cloneList = $(this).children().clone()$(this).append($cloneList)})

css代碼：

/* 動畫 */ .monitor .marquee-view{position: absolute;width: 100%;top: 1.6rem;bottom: 0;overflow: hidden; } .monitor .marquee{animation: scroll-top 15s linear infinite; } .monitor .marquee:hover{animation-play-state: paused; } @keyframes scroll-top {0%{}100%{transform: translateY(-50%);} }

13、點位區域-布局

html結構：

<!-- 點位 --><div class="point panel"><div class="inner"><h3>點位分布統計</h3><div class="chart"><div class="pie"></div><div class="data"><div class="item"><h4>320,11</h4><span><i class="icon-dot" style="color: #ed3f35"></i>點位總數</span></div><div class="item"><h4>418</h4><span><i class="icon-dot" style="color: #eacf19"></i>本月新增</span></div></div></div></div></div>

css樣式：

/* 點位 */ .point {height: 14.167rem; } .point .chart {display: flex;margin-top: 1rem;justify-content: space-between; } .point .pie {width: 13rem;height: 10rem;margin-left: -0.4rem; } .point .data {display: flex;flex-direction: column;justify-content: space-between;width: 7rem;padding: 1.5rem 1.25rem;box-sizing: border-box;background-image: url(../images/rect.png);background-size: cover; } .point h4 {margin-bottom: 0.5rem;font-size: 1.167rem;color: #fff; } .point span {display: block;color: #4c9bfd;font-size: 0.667rem; }

14、點位區域-餅圖

實現步驟：

• 從官方示例中找到最接近項目需求的例子，適當修改。
• 在自己的項目中使用起來
• 按照產品需求，來定制圖表。

第一步：參考官方例子

option = {// 控制提示tooltip: {// 非軸圖形，使用item的意思是放到數據對應圖形上觸發提示trigger: 'item',// 格式化提示內容：// a 代表圖表名稱 b 代表數據名稱 c 代表數據 d代表 當前數據/總數據的比例formatter: "{a} <br/>{b} : {c} (ozvdkddzhkzd%)"},// 控制圖表series: [{// 圖表名稱name: '點位統計',// 圖表類型type: 'pie',// 南丁格爾玫瑰圖 有兩個圓 內圓半徑10% 外圓半徑70%// 百分比基于 圖表DOM容器的半徑radius: ['10%', '70%'],// 圖表中心位置 left 50% top 50% 距離圖表DOM容器center: ['50%', '50%'],// 半徑模式，另外一種是 area 面積模式roseType: 'radius',// 數據集 value 數據的值 name 數據的名稱data: [{value:10, name:'rose1'},{value:5, name:'rose2'},{value:15, name:'rose3'},{value:25, name:'rose4'},{value:20, name:'rose5'},{value:35, name:'rose6'},{value:30, name:'rose7'},{value:40, name:'rose8'}]}] };

第二步：使用起來

// 實現點位-餅狀圖 (function () {var option = {// 控制提示tooltip: {// 非軸圖形，使用item的意思是放到數據對應圖形上觸發提示trigger: 'item',// 格式化提示內容：// a 代表圖表名稱 b 代表數據名稱 c 代表數據 d代表 當前數據/總數據的比例formatter: "{a} <br/>{b} : {c} (ozvdkddzhkzd%)"},// 控制圖表series: [{// 圖表名稱name: '點位統計',// 圖表類型type: 'pie',// 南丁格爾玫瑰圖 有兩個圓 內圓半徑10% 外圓半徑70%// 百分比基于 圖表DOM容器的半徑radius: ['10%', '70%'],// 圖表中心位置 left 50% top 50% 距離圖表DOM容器center: ['50%', '50%'],// 半徑模式，另外一種是 area 面積模式roseType: 'radius',// 數據集 value 數據的值 name 數據的名稱data: [{ value: 10, name: 'rose1' },{ value: 5, name: 'rose2' },{ value: 15, name: 'rose3' },{ value: 25, name: 'rose4' },{ value: 20, name: 'rose5' },{ value: 35, name: 'rose6' },{ value: 30, name: 'rose7' },{ value: 40, name: 'rose8' }]}]};var myChart = echarts.init($('.pie')[0])myChart.setOption(option) })();

第三步：按照需求定制

• 需求1：數據使用

{ value: 20, name: '云南' },{ value: 26, name: '北京' },{ value: 24, name: '山東' },{ value: 25, name: '河北' },{ value: 20, name: '江蘇' },{ value: 25, name: '浙江' },{ value: 30, name: '四川' },{ value: 42, name: '湖北' }

• 需求2：顏色設置

['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],

• 需求3：字體略小些 10 px
• 需求4：引導線略短些
  • 連接圖表 8 px
  • 連接文字 10 px

- data:[ - {value:10, name:'rose1'}, - {value:5, name:'rose2'}, - {value:15, name:'rose3'}, - {value:25, name:'rose4'}, - {value:20, name:'rose5'}, - {value:35, name:'rose6'}, - {value:30, name:'rose7'}, - {value:40, name:'rose8'} - ] + data: [ + { value: 20, name: '云南' }, + { value: 26, name: '北京' }, + { value: 24, name: '山東' }, + { value: 25, name: '河北' }, + { value: 20, name: '江蘇' }, + { value: 25, name: '浙江' }, + { value: 30, name: '四川' }, + { value: 42, name: '湖北' } + ], + // 文字調整 + label:{ + fontSize: 10 + }, + // 引導線調整 + labelLine: { + // 連接扇形圖線長 + length: 8, + // 連接文字線長 + length2: 10 + } + } + ], + // 每塊圖顏色 + color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']

day2

15、地圖區域-預留布局

html結構：

<!-- 地圖 --><div class="map"><h3><span class="icon-cube"></span>設備數據統計</h3><div class="chart"><div class="geo"></div></div></div>

css樣式：

/* 地圖 */ .map {height: 24.1rem;margin-bottom: 0.833rem;display: flex;flex-direction: column; } .map h3 {line-height: 1;padding: 0.667rem 0;margin: 0;font-size: 0.833rem;color: #fff; } .map .icon-cube {color: #68d8fe; } .map .chart {flex: 1;background-color: rgba(255, 255, 255, 0.05); } .map .geo {width: 100%;height: 100%; }

16、用戶統計-布局

html結構：

<!-- 用戶 --><div class="users panel"><div class="inner"><h3>全國用戶總量統計</h3><div class="chart"><div class="bar"></div><div class="data"><div class="item"><h4>120,899</h4><span><i class="icon-dot" style="color: #ed3f35"></i>用戶總量</span></div><div class="item"><h4>248</h4><span><i class="icon-dot" style="color: #eacf19"></i>本月新增</span></div></div></div></div></div>

css樣式：

/* 用戶模塊 */ .users {height: 14.167rem;display: flex; } .users .chart {display: flex;margin-top: 1rem; } .users .bar {width: 24.5rem;height: 10rem; } .users .data {display: flex;flex-direction: column;justify-content: space-between;width: 7rem;padding: 1.5rem 1.25rem;box-sizing: border-box;background-image: url(../images/rect.png);background-size: cover; } .users h4 {margin-bottom: 0.5rem;font-size: 1.167rem;color: #fff; } .users span {display: block;color: #4c9bfd;font-size: 0.667rem; }

17、用戶統計-柱狀圖

實現步驟：

• 從官方示例中找到最接近項目需求的例子，適當修改。
• 在自己的項目中使用起來
• 按照產品需求，來定制圖表。

第一步：參考官方示例 + 分析

option = {// 工具提示tooltip: {// 觸發類型 經過軸觸發axis 經過軸觸發itemtrigger: 'axis',// 軸觸發提示才有效axisPointer: { // 默認為直線，可選為：'line' 線效果 | 'shadow' 陰影效果 type: 'shadow' }},// 圖表邊界控制grid: {// 距離 上右下左 的距離left: '3%',right: '4%',bottom: '3%',// 邊框大小是否包含文本【類似于boxsizing】containLabel: true},// 控制x軸xAxis: [{// 使用類目，必須有data屬性type: 'category',// 使用 data 中的數據設為刻度文字data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],// 刻度設置axisTick: {// true意思：圖形在刻度中間// false意思：圖形在刻度之間alignWithLabel: true}}],// 控制y軸yAxis: [{// 使用數據的值設為刻度文字type: 'value'}],// 控制x軸series: [{// 圖表數據名稱name: '用戶統計',// 圖表類型type: 'bar',// 柱子寬度barWidth: '60%',// 數據data: [10, 52, 200, 334, 390, 330, 220]}]};

第二步：使用起來

// 用戶統計-柱狀圖 (function () {var option = {// 參考上面即可... };var myChart = echarts.init($('.bar')[0])myChart.setOption(option) })();

第三步：按照需求修改

• 調整刻度
  • 柱子在刻度之間【小短線】
  • 剔除刻度：show：false
  • 文字顏色 #4c9bfd：axisLabel {color : #4c9bfd}

// 控制x軸xAxis: [{// 使用類目，必須有data屬性type: 'category',// 使用 data 中的數據設為刻度文字data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],// 刻度設置axisTick: {// true意思：圖形在刻度中間// false意思：圖形在刻度之間 - alignWithLabel: true, + alignWithLabel: false, + show: false}, + // 文字 + axisLabel: { + color: '#4c9bfd' + }} // 控制y軸yAxis: [{// 使用數據的值設為刻度文字type: 'value', + // 刻度設置 + axisTick: { + show: false + }, + // 文字 + axisLabel: { + color: '#4c9bfd' + } + }],

• 調整邊框與間距
  • 加上邊框，顏色 rgba(0, 240, 255, 0.3)
  • 邊距調整 3% 3% 3% 0%
  • y軸分割線顏色 rgba(0, 240, 255, 0.3)

// 圖表邊界控制grid: {// 距離 上右下左 的距離 + top: '3%', + right: '3%', + bottom: '3%', + left: '0%',// 是否包含文本containLabel: true, + // 顯示邊框 + show: true, + // 邊框顏色 + borderColor: 'rgba(0, 240, 255, 0.3)'}, // 控制y軸yAxis: [{// 使用數據的值設為刻度文字type: 'value',// 刻度設置axisTick: {show: false},// 文字axisLabel: {color: '#4c9bfd'}, + splitLine: { + lineStyle: { + color: 'rgba(0, 240, 255, 0.3)' + } + }}],

• 調整數據，與省略圖形。

// series data: [2100,1900,1700,1560,1400,1200,1200,1200,900,750,600,480,240] // xAxis data: ['上海', '廣州', '北京', '深圳', '合肥', '', '......', '', '杭州', '廈門', '濟南', '成都', '重慶']

• 柱子顏色，和工具提示。

  • 顏色，使用漸變，從上#00fffb 到下#0061ce
  • 設置漸變：itemStyle
  // series配置// 顏色itemStyle: {// 提供的工具函數生成漸變顏色color: new echarts.graphic.LinearGradient(// (x1,y2) 點到點 (x2,y2) 之間進行漸變0, 0, 0, 1,[{offset: 0, color: '#00fffb'}, // 0 起始顏色{offset: 1, color: '#0061ce'} // 1 結束顏色])}
  • 經過圖形才顯示提示，且省略的柱子不需要提示
  // 經過圖形才顯示工具提示tooltip: { - trigger: 'axis', + trigger: 'item', // 中間省略的數據 準備三項 var item = {name:'',value: 1200,// 柱子顏色itemStyle: {color: '#254065'},// 鼠標經過柱子顏色emphasis: {itemStyle: {color: '#254065'}},// 工具提示隱藏tooltip: {extraCssText: 'opacity:0'}} // series配置data選項在中使用 - data: [2100,1900,1700,1560,1400,1200,1200,1200,900,750,600,480,240], + data: [2100,1900,1700,1560,1400,item,item,item,900,750,600,480,240],

  總結：寫echarts繁雜難記，今后在工作中只需要按照需求去查找，切勿死記硬背。

18、訂單區域-布局

html結構：

<!-- 訂單 --><div class="order panel"><div class="inner"><!-- 篩選 --><div class="filter"><a href="javascript:;" data-key="day365" class="active">365天</a><a href="javascript:;" data-key="day90">90天</a><a href="javascript:;" data-key="day30">30天</a><a href="javascript:;" data-key="day1">24小時</a></div><!-- 數據 --><div class="data"><div class="item"><h4>20,301,987</h4><span><i class="icon-dot" style="color: #ed3f35;"></i>訂單量</span></div><div class="item"><h4>99834</h4><span><i class="icon-dot" style="color: #eacf19;"></i>銷售額(萬元)</span></div></div></div></div>

css樣式：

/* 訂單 */ .order {height: 6.167rem; } .order .filter {display: flex; } .order .filter a {display: block;height: 0.75rem;line-height: 1;padding: 0 0.75rem;color: #1950c4;font-size: 0.75rem;border-right: 0.083rem solid #00f2f1; } .order .filter a:first-child {padding-left: 0; } .order .filter a:last-child {border-right: none; } .order .filter a.active {color: #fff;font-size: 0.833rem; } .order .data {display: flex;margin-top: 0.833rem; } .order .item {width: 50%; } .order h4 {font-size: 1.167rem;color: #fff;margin-bottom: 0.417rem; } .order span {display: block;color: #4c9bfd;font-size: 0.667rem; }

19、訂單區域-效果

實現步驟：

• 提前準備數據
• 點擊后切tab激活樣式
• 點擊后切換數據內容
• 開啟定時器動態切換數據

// 訂單功能 (function(){// 1. 準備數據var data = {day365: { orders: '20,301,987', amount: '99834' },day90: { orders: '301,987', amount: '9834' },day30: { orders: '1,987', amount: '3834' },day1: { orders: '987', amount: '834' }}// 獲取顯示 訂單數量 容器var $h4Orders = $('.order h4:eq(0)')// 獲取顯示 金額數量 容器var $h4Amount = $('.order h4:eq(1)')$('.order').on('click','.filter a',function(){// 2. 點擊切換激活樣式$(this).addClass('active').siblings().removeClass('active')// 3. 點擊切換數據var currdata = data[this.dataset.key]$h4Orders.html(currdata.orders)$h4Amount.html(currdata.amount)})// 4. 開啟定時器切換數據var index = 0var $allTab = $('.order .filter a')setInterval(function(){index ++ if (index >= 4) index = 0$allTab.eq(index).click()},5000) })();

總結

以上是生活随笔為你收集整理的数据可视化（BI报表的开发）第二天的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。