自适应备忘录 demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>工作台-备忘录</title>
<link rel="stylesheet" href="../css/weixincrm.min.css">
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript" src="../js/weixincrm.min.js" ></script>
<style type="text/css">
.calendar2 h2{line-height: 0.8rem;height: 0.8rem; text-align: center; color: #25a9e6; font-size: 0.32rem; background-color: #f5f5f5;}
.calendar2 table tbody{width: 100%; position: relative; z-index: 60;}
.calendar2 table{width: 100%;background-color: #fff; border-collapse:collapse; }
.calendar2 table thead{background-color: #c6dde4;}
.calendar2 table thead tr { height: 0.5rem; line-height: 0.5rem; }
.calendar2 table thead tr td{ color: #666; font-size: 0.26rem; text-align: center; font-weight: 500;}
.calendar2 table thead tr td .event-wekday{width: 0.6rem;}
.calendar2 table tbody{padding-top: 0.2rem;}
.calendar2 table tbody tr{height: 0.6rem;line-height: 0.6rem; }
.calendar2 table tbody tr td{color: #333; font-size: 0.26rem; text-align: center; padding-top: 0.2rem;font-weight: 400;}
.calendar2 table tbody tr td .event-day{width: 0.6rem; display: inline-block;border: 2px solid #fff;}
.calendar2 table tbody tr td span.active{ border: 2px solid #3399cc;border-radius: 50%;}
.calendar2 table tbody tr td .current{width: 0.6rem height:0.6rem; border-radius: 50%; background-color: #3399cc; color: #fff;}
.day-event2 {font-size: 0.28rem;color: #333;box-sizing: border-box; margin-left: 0.35rem; margin-right: 0.25rem; border-left: 2px solid #ddd; padding-top: 0.2rem;position: relative;display: none;}
.day-event2 .dost{width: 0.34rem; height: 0.34rem; border: 2px solid #e3e3e3; border-radius: 50%;position: absolute; top: 0.43rem;left: -0.25rem;text-align: center;z-index: 2;}
.day-event2 .dost b{background-color: #ef5e5e; width: 0.29rem; height: 0.29rem; border-radius: 50%; position: absolute;left: 0.028rem;top: 0.025rem;}
.day-event2 div{margin-left: 0.45rem; background-color: #fff; padding-top: 0.15rem; border-radius: 0.05rem; padding-left: 0.2rem; position: relative;}
.day-event2 div p{ line-height: 0.3rem;}
.day-event2 div .arrow-left{border-bottom: 0.3rem solid transparent;border-top: 0.3rem solid transparent;border-right: 0.3rem solid #fff; font-size: 0;line-height: 0; position: absolute;left: -0.25rem;/* top: 0.4rem; */}
.day-event2 .time-text{font-size: 0.22rem; color: #999;padding-top: 0.1rem;padding-bottom: 0.1rem;}
.calendar2 table tbody tr td .current-day{ width: 0.6rem height:0.6rem; border-radius: 50%; background-color: #3399cc; color: #fff;border: 2px solid #3399cc;}
.calendar2 table tbody tr td .event{position: relative;background: #e7e7e7;border: 2px solid #e7e7e7;border-radius: 50%;}
</style>
</head>
<body>
<div id="section_container">
<section id="index-section" class="active">
<header>
<div class="goback2"><h1>客户信息</h1><a href="#" class="backhref"></a></div>
<div class="calendar2 article-top-backhref2">
<h2 class="month">9月2016</h2>
<table>
<thead class="head">
<tr>
<td><span class="event-wekday">周日<span></td>
<td><span class="event-wekday">周日<span></td>
<td><span class="event-wekday">周日<span></td>
<td><span class="event-wekday">周日<span></td>
<td><span class="event-wekday">周日<span></td>
<td><span class="event-wekday">周日<span></td>
<td><span class="event-wekday">周日<span></td>
</tr>
</thead>
<tbody class="event-calendar2">
<tr class="row1">
<td><span class="event-day"></span></td>
<td><span class="event-day"></span></td>
<td><span class="event-day"></span></td>
<td><span class="event-day"></span></td>
<td><span class="event-day active">1</span></td>
<td><span class="event-day">2</span></td>
<td><span class="event-day">3</span></td>
</tr>
<tr class="row2">
<td><span class="event-day">4</span></td>
<td><span class="event-day">5</span></td>
<td><span class="event-day">6</span></td>
<td><span class="event-day">7</span></td>
<td><span class="event-day">8</span></td>
<td><span class="event-day">9</span></td>
<td><span class="event-day">10</span></td>
</tr>
<tr class="row3">
<td><span class="event-day">11</span></td>
<td><span class="event-day">12</span></td>
<td><span class="event-day">13</span></td>
<td><span class="event-day">14</span></td>
<td><span class="event-day">15</span></td>
<td><span class="event-day">16</span></td>
<td><span class="event-day">17</span></td>
</tr>
<tr class="row4">
<td><span class="event-day">18</span></td>
<td><span class="event-day">19</span></td>
<td><span class="event-day current">20</span></td>
<td><span class="event-day">21</span></td>
<td><span class="event-day">22</span></td>
<td><span class="event-day">23</span></td>
<td><span class="event-day">24</span></td>
</tr>
<tr class="row5">
<td><span class="event-day">25</span></td>
<td><span class="event-day">26</span></td>
<td><span class="event-day">27</span></td>
<td><span class="event-day">30</span></td>
<td><span class="event-day"></span></td>
</tr>
</tbody>
</table>
</div>
</header>
<article class="active article-top-0 clearfix">
<div class="scroller scroller-top">
<div class="list">
<!-- <div class="day-event2" date-day="19" date-month="9" date-year="2016" data-number="0" style="display: block;">
<span class="dost"><b></b></span><div><a class="arrow-left"></a><p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam</p>
<p class="time-text">16:52</p>
</div>
</div>
<div class="day-event2" date-day="19" date-month="9" date-year="2016" data-number="0" style="display: block;">
<span class="dost"><b></b></span><div><a class="arrow-left"></a><p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam</p>
<p class="time-text">16:52</p>
</div>
</div> -->
</div>
</div>
</article>
</section>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.scroller').css('top',$('header').height());
})
</script>
<script src="../js/simplecalendar2.js" type="text/javascript"></script>
<!-- <script src="../js/jquery-latest.min.js" type="text/javascript"></script>
<script src="../js/simplecalendar.js" type="text/javascript"></script> -->
</body>
</html>
var calendar = {
init: function(ajax) {
if (ajax) {
// ajax call to print json
//
$.ajax({
type: 'GET',
url: '../data/events.json',
dataType: 'json',
success: function(data){
var events = data.events;
// loop json & append to dom
var myDate = new Date();
var now = myDate.getFullYear() +"/" +(myDate.getMonth()+1)+"/"+myDate.getDate();
for (var i = 0; i < events.length; i++)
{
var time = events[i].year + "/" + events[i].month +"/"+events[i].day;
if(time == now )
{
$('.list').append('<div class="day-event2" style="display:block;" date-day="'+ events[i].day +'" date-month="' + events[i].month +'" date-year="'+ events[i].year +'" data-number="'+ i +'"><span class="dost"><b class="active"></b></span><div><a class="arrow-left"></a><p>'+ events[i].description +'</p><p class="time-text">16:52</p></div></div>');
}
else
{
$('.list').append('<div class="day-event2" date-day="'+ events[i].day +'" date-month="' + events[i].month +'" date-year="'+ events[i].year +'" data-number="'+ i +'"><span class="dost"><b class="active"></b></span><div><a class="arrow-left"></a><p>'+ events[i].description +'</p><p class="time-text">16:52</p></div></div>');
}
}
calendar.startCalendar();
},
error: function(xhr, type){
alert('Ajax error!')
}
})
}
else {
// if not using ajax start calendar
calendar.startCalendar();
}
},
startCalendar: function() {
var mon = '周一';
var tue = '周二';
var wed = '周三';
var thur = '周四';
var fri = '周五';
var sat = '周六';
var sund = '周日';
/**
* Get current date
*/
var d = new Date();
var strDate = yearNumber + "/" + (d.getMonth() + 1) + "/" + d.getDate();
var yearNumber = (new Date).getFullYear();
/**
* Get current month and set as '.current-month' in title
*/
var monthNumber = d.getMonth() + 1;
function GetMonthName(monthNumber) {
var months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
return months[monthNumber - 1];
}
setMonth(monthNumber, mon, tue, wed, thur, fri, sat, sund);
function setMonth(monthNumber, mon, tue, wed, thur, fri, sat, sund) {
$('.month').text(GetMonthName(monthNumber) + ' ' + yearNumber);
$('.month').attr('data-month', monthNumber);
printDateNumber(monthNumber, mon, tue, wed, thur, fri, sat, sund);
}
var oSlide = document.querySelector('.calendar2 table');
// var oList = document.querySelector('.calendar header');
var startPoint = 0;
var startX = 0;
var startY= 0;
var translateX = 0;
var translateY= 0;
oSlide.addEventListener('touchstart',function(e){
startPoint = e.changedTouches[0].pageX;
startY=e.changedTouches[0].pageY;
})
oSlide.addEventListener('touchmove',function(e){
translateX = e.changedTouches[0].pageX - startPoint;
translateY = e.changedTouches[0].pageY - startY;
// translateX = startX + dis;
// translateY=
})
oSlide.addEventListener('touchend',function(e){
if(Math.abs(translateX)> Math.abs(translateY))
{
if(startPoint.toFixed(2)==e.changedTouches[0].pageX.toFixed(2))
{
return false;
}
else
{
if(translateX>0)
{
var monthNumber = $('.month').attr('data-month');
if (monthNumber < 2) {
$('.month').attr('data-month', '13');
var monthNumber = $('.month').attr('data-month');
yearNumber = yearNumber - 1;
setTimeout(setMonth(parseInt(monthNumber) - 1, mon, tue, wed, thur, fri, sat, sund),1000);
} else {
setMonth(parseInt(monthNumber) - 1, mon, tue, wed, thur, fri, sat, sund);
};
var myDate = new Date();
var date=(myDate.getMonth()+1)+"月"+myDate.getFullYear();
var day=myDate.getDate();
var year=myDate.getFullYear();
var month=myDate.getMonth()+1;
$('.day-event2').css('display','none');
if($('.calendar2 .month').text().replace(" ","")==date)
{
$('.day-event2[date-month="' + month + '"][date-year="' + year + '"][date-day="' + day + '"]').css('display','block');
}
// else
// {
// }
}
else if(translateX<0)
{
var monthNumber = $('.month').attr('data-month');
if (monthNumber > 11) {
$('.month').attr('data-month', '0');
var monthNumber = $('.month').attr('data-month');
yearNumber = yearNumber + 1;
setMonth(parseInt(monthNumber) + 1, mon, tue, wed, thur, fri, sat, sund);
} else {
setMonth(parseInt(monthNumber) + 1, mon, tue, wed, thur, fri, sat, sund);
};
var myDate = new Date();
var date=(myDate.getMonth()+1)+"月"+myDate.getFullYear();
var day=myDate.getDate();
var year=myDate.getFullYear();
var month=myDate.getMonth()+1;
$('.day-event2').css('display','none');
if($('.calendar2 .month').text().replace(" ","")==date)
{
$('.day-event2[date-month="' + month + '"][date-year="' + year + '"][date-day="' + day + '"]').css('display','block');
}
}
}
}
else
{
return false;
}
})
function printDateNumber(monthNumber, mon, tue, wed, thur, fri, sat, sund) {
$($('tbody.event-calendar2 tr')).each(function(index) {
$(this).empty();
});
$($('thead.head tr')).each(function(index) {
$(this).empty();
});
function getDaysInMonth(month, year) {
// Since no month has fewer than 28 days
var date = new Date(year, month, 1);
var days = [];
while (date.getMonth() === month) {
days.push(new Date(date));
date.setDate(date.getDate() + 1);
}
return days;
}
i = 0;
setDaysInOrder(mon, tue, wed, thur, fri, sat, sund);
function setDaysInOrder(mon, tue, wed, thur, fri, sat, sund) {
var monthDay = getDaysInMonth(monthNumber - 1, yearNumber)[0].toString().substring(0, 3);
if (monthDay === 'Mon') {
$('thead.head tr').append('<td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td>');
} else if (monthDay === 'Tue') {
$('thead.head tr').append('<td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td>');
} else if (monthDay === 'Wed') {
$('thead.head tr').append('<td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td>');
} else if (monthDay === 'Thu') {
$('thead.head tr').append('<td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td>');
} else if (monthDay === 'Fri') {
$('thead.head tr').append('<td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td>');
} else if (monthDay === 'Sat') {
$('thead.head tr').append('<td><span class="event-wekday">' + sat + '</span></td><td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td>');
} else if (monthDay === 'Sun') {
$('thead.head tr').append('<td><span class="event-wekday">' + sund + '</span></td><td><span class="event-wekday">' + mon + '</span></td><td><span class="event-wekday">' + tue + '</span></td><td><span class="event-wekday">' + wed + '</span></td><td><span class="event-wekday">' + thur + '</span></td><td><span class="event-wekday">' + fri + '</span></td><td><span class="event-wekday">' + sat + '</span></td>');
}
};
$(getDaysInMonth(monthNumber - 1, yearNumber)).each(function(index) {
var index = index + 1;
if (index < 8) {
$('tbody.event-calendar2 tr.row1').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span class="event-day">' + index + '</span></td>');
} else if (index < 15) {
$('tbody.event-calendar2 tr.row2').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span class="event-day">' + index + '</span></td>');
} else if (index < 22) {
$('tbody.event-calendar2 tr.row3').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span class="event-day">' + index + '</span></td>');
} else if (index < 29) {
$('tbody.event-calendar2 tr.row4').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span class="event-day">' + index + '</span></td>');
} else if (index < 32) {
$('tbody.event-calendar2 tr.row5').append('<td date-month="' + monthNumber + '" date-day="' + index + '" date-year="' + yearNumber + '"><span class="event-day">' + index + '</span></td>');
}
i++;
});
var date = new Date();
var month = date.getMonth() + 1;
var thisyear = new Date().getFullYear();
setCurrentDay(month, thisyear);
setEvent();
displayEvent();
}
/**
* Get current day and set as '.current-day'
*/
function setCurrentDay(month, year) {
var viewMonth = $('.month').attr('data-month');
var eventYear = $('.event-days').attr('date-year');
if (parseInt(year) === yearNumber) {
if (parseInt(month) === parseInt(viewMonth)) {
$('tbody.event-calendar2 td[date-day="' + d.getDate() + '"] span').addClass('current-day');
}
}
};
/*$('tbody td span').on('click', function(e) {
alert('11');
if ($(this).hasClass('event')) {
$('tbody.event-calendar2 td span').removeClass('active');
$(this).addClass('active');
} else {
$('tbody.event-calendar2 td span').removeClass('active');
$(this).addClass('active');
// debugger;
// $('.event-calendar tr td[class="active"]').text();获取日
// $('.month').text();获取年月
};
});
*/
/**
* Add '.event' class to all days that has an event
*/
function setEvent() {
$('.day-event2').each(function(i) {
var eventMonth = $(this).attr('date-month');
var eventDay = $(this).attr('date-day');
var eventYear = $(this).attr('date-year');
var eventClass = $(this).attr('event-class');
if (eventClass === undefined) eventClass = 'event';
else eventClass = 'event ' + eventClass;
var date = new Date();
var month = date.getMonth() + 1;
var day=date.getDate();
if (parseInt(eventYear) === yearNumber) {
if(eventMonth==month&& eventDay==day)
{
$('tbody.event-calendar2 tr td[date-month="' + eventMonth + '"][date-day="' + eventDay + '"] span').addClass();
}
else
{
$('tbody.event-calendar2 tr td[date-month="' + eventMonth + '"][date-day="' + eventDay + '"] span').addClass(eventClass);
}
}
});
};
/**
* Get current day on click in calendar
* and find day-event to display
*/
function displayEvent() {
$('tbody.event-calendar2 td span').on('click', function(e) {
$('.day-event2').css('display','none');
var monthEvent = $(this).parent().attr('date-month');;
var dayEvent = $(this).text();
var yearEvent = $(this).parent().attr('date-year');
$('.day-event2[date-month="' + monthEvent + '"][date-year="' + yearEvent + '"][date-day="' + dayEvent + '"]').css('display','block');
$('tbody.event-calendar2 td span').removeClass('active');
$(this).addClass('active');
});
};
}
}
$(document).ready(function() {
calendar.init('ajax');
});
自适应备忘录 demo的更多相关文章
- 前端切图:手机端自适应布局demo
手机端自适应布局demo原型如下: 图片发自简书App 要求如下:适应各种机型源码如下: <!DOCTYPE html > <html> <head> <me ...
- 手机端自适应布局demo
原型如下: 要求如下:适应各种机型 源码如下: <!DOCTYPE html > <html> <head> <meta http-e ...
- textarea如何实现高度自适应？
今天需要些一个回复评论的页面,设计师给的初始界面就是一个只有一行的框.然后当时就想这个交互该怎么实现比较好,然后想起了新浪微博的做法:点击评论,默认显示一行,当输入的文字超过一行或者输入Enter时, ...
- textarea文本域轻松实现高度自适应
转载:http://www.xuanfengge.com/textarea-on-how-to-achieve-a-high-degree-of-adaptive.html 今天需要些一个回复评论的页 ...
- display:table-cell的应用
一.display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6 ...
- 几种display:table-cell的应用
一.display:table-cell属性简述 display:table- cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以及其他现代浏览器都是支持此属性的,但是IE ...
- 也来谈谈wap端瀑布流布局
Definition 瀑布流布局,在视觉上表现为参差不齐的多栏布局,随着页面滚动条向下滚动,新数据不断被加载进来. 瀑布流对于图片的展现,是高效而具有吸引力的,用户一眼扫过的快速阅读模式可以在短时间内 ...
- absolut绝对定位的非绝对定位用法
一.absolute绝对定位的流行用法 一般而言,我们会用absolute绝对定位做什么呢?就是绝对定位,顾名思意,定死在某个位置上.例如,lightbox效果就是使用的绝对定位,例如新浪微博的弹出提 ...
- 【分享】纯jQuery实现星巴克官网导航栏效果
前言 大冬天的没得玩,只能和代码玩. 所以就无聊研究了一下星巴克官网,在我看来应该是基本还原吧~ 请各位大神指教! 官网效果图 要写的就是最上方的会闪现的白色条条 效果分析 1.在滚动条往下拉到一定距 ...
随机推荐
- SQL注入
@org.junit.Test public void testLogin() { CardDAO cd=new CardDAO(); if(cd.dengru("' or 1 = 1--& ...
- jquery-懒加载插件
在Web应用程序中,系统的瓶颈常在于系统的响应速度.如果系统响应速度过慢,用户就会出现埋怨情绪, 系统的价值也因此会大打折扣.因此,提高系统响应速度,是非常重要的. 从此可知,再好的网站,再炫的网站, ...
- 当GitHub把我当成DDos攻击者拉进了黑名单中。。。
Github黑名单自救+快速稳定FQ 异常处理汇总-开发工具 http://www.cnblogs.com/dunitian/p/4522988.html 原因:项目冲突,没有先更新后提交,他自行更 ...
- webBrowser 加载网页
事件 webBrowser_DocumentCompleted private void webBrowser_DocumentCompleted(object sender, WebBrowserD ...
- Change Line Type in OpenCascade
Change Line Type in OpenCascade eryar@163.com 关键字KeyWords:OpenCascade,Line Aspect, Line Type 在OpenCa ...
- Panorama和Pivot的区别
Panorama 1.提供了更丰富的用户体验(建议最多4个Items项) 2.Item可以设置屏幕方向为水平,支持多于一个屏幕的显示 3.可以使用任意大小的背景图片,Panorama会自动地缩放为屏幕 ...
- 一起学微软Power BI系列-官方文档-入门指南(4)Power BI的可视化
在前面的系列文章中,我们介绍了官方有关获取数据,以及建模的原始文档和基本介绍.今天继续给大家介绍官方文档中,有关可视化的内容.实际上获获取数据和建模更注重业务关系的处理,而可视化则关注对数据的解读.这 ...
- MongoDB学习系列(3)--解决MongoDB Unexpected Shutdown问题
晚上准备继续学习PHP+MongoDB,点击Run_MongoDB_Service.bat文件,这个文件是我写的bat文件,就是快速启动MongoDB.但是命令行一闪而过,我很奇怪.昨天晚上写代码还是 ...
- BFC之浅析篇
BFC是什么呢? 掏粪男孩? 当然不是咯.BFC,英文名Block formatting context,直译为“块级格式化上下文”.它是W3C CSS 2.1规范中的一个概念,决定了元素如何对内容进 ...
- MySQL中RESET SLAVE和RESET MASTER的区别
RESET SLAVE的语法如下: RESET SLAVE [ALL] [channel_option] channel_option: FOR CHANNEL channel 其中,channel_ ...