这是一个pug模板储存仓库

使用

// 安装
npm i @trscd/trs-page-html
// 引用对应模板即可
// 举个例子
//- 1. include ../../../components/NewsList.pug
//- 2. +NewsList(6) 数字数量决定渲染的列表数量

简述

1. 相关的公共css文件在项目中已有储存，这个地方备份了一份。
2. 这里只是pug模板，其他非公共css和所有的js请在自己项目中添加

组件一览

1. HotNew （新闻头条）

在需要应用的地方

// xxx.pug部分
include ../../../components/HotNews.pug

.yydh-div.toutiao
    +HotNews(length)

// xxx.js部分
// 自己在pug添加所需js
var swp6 = new Swiper('.toutiao .swiper-container', {
    autoplay: 2500,
    loop: true,
    speed: 1000,
    mode: 'vertical',
    autoplayDisableOnInteraction: false
});
$('.toutiao').hover(function() {
    swp6.stopAutoplay();
},function() {
    swp6.startAutoplay();
})

| 参数 | 类型 | 例子 |备注 | |-----|-----|------|------| | length | number | 5 | 指的是头条新闻的数量 |

2. NewsList （新闻列表）

在需要应用的地方

// xxx.pug部分
include ../../../components/NewsList.pug

.yydh-div
    +NewsList(6)

| 参数 | 类型 | 例子 |备注 | |-----|-----|------|------| | length | number | 5 | 指的是新闻的数量 |

3. SlideNav （侧边导航）

在需要应用的地方

// xxx.pug部分
include ../../../components/SlideNav.pug

.yydh-div
    +SlideNav(['当地要闻', '部门信息', '乡镇动态', '中国政务', '当地政务', '媒体关注'])

| 参数 | 类型 | 例子 |备注 | |-----|-----|------|------| | arr | array | ['当地要闻', '部门信息', '...'] | 需要展示的导航名字 |

4. FriendshipLinks （友情链接）

在需要应用的地方

// xxx.pug部分
include ../../../components/FriendshipLinks.pug

.yydh-div
    +FriendshipLinks(['中央部省网站1', '中央部省网站2', '中央部省网站3', '中央部省网站4'])

// xxx.js部分
// 自己在pug添加所需js
$('.drop-select').dropDownImgText({
    tag: '.select',
    text: '.text',
    arrow: '.arrow-icon',
    drop: '.dropdown-menu',
    label: '.a'
});

| 参数 | 类型 | 例子 |备注 | |-----|-----|------|------| | arr | array | ['中央部省网站1', '中央部省网站2',...] | 指的是友情链接初始的名字 |

5. CmPage （分页）

在需要应用的地方

// xxx.pug部分
include ../../../components/CmPage.pug

.yydh-div
    +CmPage(['pagesize', 'first', 'prev', 'pager', 'next', 'last', 'jumper', 'submit', 'go'])
.yydh-div
    +CmPage(['first', 'prev', 'pager', 'next', 'last', 'jumper'])

| 参数 | 类型 | 例子 |备注 | |-----|-----|------|------| | arr | array | ['pagesize', 'first', 'prev', 'pager', 'next', 'last', 'jumper', 'submit', 'go'] | 见下一个表格 |

| key | 类型 | 例子 |备注 | |-----|-----|------|------| | pagesize | string | | 展示共多少页选项 | | first | string | | 展示首页选项 | | prev | string | | 展示上一页选项 | | pager | string | | 展示分页器选项 | | next | string | | 展示下一页选项 | | jumper | string | | 展示跳转选项 | | submit | string | | 展示提交按钮选项 | | go | string | | 展示go按钮选项 |

6. Location （当前位置）

在需要应用的地方

// xxx.pug部分
include ../../../components/Location.pug

.yydh-div
    +Location({name: '您当前所在位置',arr: ['首页','细览']})

| 参数 | 类型 | 例子 |备注 | |-----|-----|------|------| | obj | object | {name: '您当前所在位置',arr: ['首页','细览']} | 见下一个表格 |

| key | 类型 | 例子 |备注 | |-----|-----|------|------| | arr | array | ['首页','细览'] | 路径 从头到尾的数组 | | name | string | '您当前所在位置' | 指的是当前所在位置的描述 |

7. CmTab （切换）

在需要应用的地方

// xxx.pug部分
include ../../../components/CmTab.pug

.yydh-div.tab
    +CmTab({arr:['通知公告1', '便民提示1'], topClass:'top1',  contClass: 'cont1'})

//- 支持自定义item
//- +CmTab({arr:['通知公告1','便民提示1'], topClass:'top1', contClass: 'cont1'})
//-     .tabItem(style="font-size: 16px")
//-         |  111
//-     .tabItem(style="font-size: 16px")
//-         |  222
// xxx.js部分
// 自己在pug添加所需js
$('.tab .cm-tab').tabSwitch({
    tabHead: '.top1 .panel',
    tabCont: '.cont1 .tabItem',
    cur: 'cur'
});

| 参数 | 类型 | 例子 |备注 | |-----|-----|------|------| | obj | object | { arr: ['通知公告1', '便民提示1'], topClass: 'top1', contClass: 'cont1'} | 见下一个表格 |

| key | 类型 | 例子 |备注 | |-----|-----|------|------| | arr | array | ['中央部省网站1', '中央部省网站2',...] | 指的是友情链接初始的名字 | | topClass | string | 'top1' | 指的是tab头部的class 用于js | | contClass | string | 'cont1' | 指的是tab内容部的class 用于js |

8. NewsPicCarousel （轮播）

在需要应用的地方

// xxx.pug部分
include ../../../components/NewsPicCarousel.pug

.yydh-div.swiper1(style="width: 600px; height: 400px; position: relative;")
    +NewsPicCarousel({
            length: 5,
            imgurl: 'lunbo-big.png',
            myclass: 'sw1',
            pageclass: 'pg1',
            showarrow: 'show'
        })

// 自己在pug添加所需js
var swp10 =  new Swiper('.sw1', {
    pagination: '.pg1',
    autoplay: 3000,
    speed: 1000,
    loop: true,
    grabCursor:false,
    paginationClickable: true,
    autoplayDisableOnInteraction: false
});
$('.sw1').hover(function() {
    swp10.stopAutoplay();
},function() {
    swp10.startAutoplay();
})
$('.swiper1 .swiper-button-prev').on('click', function(e){
    e.preventDefault()
    swp10.swipePrev()
})
$('.swiper1 .swiper-button-next').on('click', function(e){
    e.preventDefault()
    swp10.swipeNext()
})

| 参数 | 类型 | 例子 |备注 | |-----|-----|------|------| | obj | object | { length: 5, imgurl: 'lunbo-big.png', myclass: 'sw1', pageclass: 'pg1', showarrow: 'show'} | 见下一个表格 |

| key | 类型 | 例子 |备注 | |-----|-----|------|------| | length | number | 5 | 轮播图数量 | | imgurl | string | 'lunbo-big.png' | 图片在自己项目的名字（必须在images文件夹里） | | myclass | string | 'sw1' | 自己swiper的类名，用于js | | pageclass | string | 'pg1' | 自己分页器的类名，用于js | | showarrow | string | 'show' | show为显示左右两个箭头，其他不显示 |

9. Banner （大图轮播）

在需要应用的地方，至于是一排显示1个或者3个 在各自的js里修改

// xxx.pug部分
include ../../../components/Banner.pug

.yydh-div.swiper2(style="height: 100px;width: 1200px; ")
    +Banner({imgNameArr: ['yydh-sy-banner.png','yydh-sy-banner.png', 'yydh-sy-banner.png']})
    // =====================================================
.yydh-div.swiper3(style="height: 100px;width: 1200px; ")
    +Banner({imgNameArr: ['yydh-sy-banner.png','yydh-sy-banner.png', 'yydh-sy-banner.png'],showarrow: 'show'})

// xxx.js部分
// 自己在pug添加所需js
var swp8 = new Swiper('.swiper2 .swiper-container', {
    autoplay: 2500,
    loop: true,
    speed: 1000,
    autoplayDisableOnInteraction: false
});
$('.swiper2').hover(function() {
    swp8.stopAutoplay();
},function() {
    swp8.startAutoplay();
})

// 新闻动态下面的专题轮播
var mySwiper = new Swiper('.swiper3 .swiper-container',{
    autoplay:false,
    loop: true,
    speed:500,
    grabCursor:false,
    paginationClickable: true,
    autoplayDisableOnInteraction: false,
    slidesPerView: 3,
    nextButton: '.swiper3 .swiper-button-next',
    prevButton: '.swiper3 .swiper-button-prev'
}); 
$('.swiper3').hover(function() {
    mySwiper.stopAutoplay();
},function() {
    mySwiper.startAutoplay();
})
$('.swiper3 .swiper-button-prev').on('click', function(e){
    e.preventDefault()
    mySwiper.swipePrev()
})
$('.swiper3 .swiper-button-next').on('click', function(e){
    e.preventDefault()
    mySwiper.swipeNext()
})

| 参数 | 类型 | 例子 |备注 | |-----|-----|------|------| | obj | object | {imgNameArr: ['yydh-sy-banner.png', 'yydh-sy-banner.png', 'yydh-sy-banner.png']} | 见下一个表格 |

| key | 类型 | 例子 |备注 | |-----|-----|------|------| | imgNameArr | array | ['yydh-sy-banner.png','yydh-sy-banner.png', 'yydh-sy-banner.png'] | 一般这种banner图都是不一样的因此要定制传入， 图片在自己项目的名字（必须在images文件夹里 | | showarrow | string | 'show' | show为显示左右两个箭头，其他不显示 |

10. DetailsTable （政策文件详情顶部的表格）

在需要应用的地方

// xxx.pug部分
include ../../../components/DetailsTable.pug

.yydh-div.toutiao
    +DetailsTable()
.yydh-div.toutiao
    +DetailsTable([{ key: '不可下载', value: '不可下载'}, { key: '文字版', value: '下载', link: true }, { key: '图片版', value: '下载', link: true }])

| 参数 | 类型 | 例子 |备注 | |-----|-----|------|------| | obj | array | [{ key: '不可下载', value: '不可下载'}, { key: '文字版', value: '下载', link: true }, { key: '图片版', value: '下载', link: true }] | 见下一个表格 |

| key | 类型 | 例子 |备注 | |-----|-----|------|------| | key | string | '索引号' | 表格左边的key | | value | string | '00000001111111' | 表格左边key的value | | link | boolean or undefined | true or false or undefined | 传布尔值或者不传 |

11. DatePicker (日期选择器)

在需要应用的地方

// xxx.pug部分
include ../../../components/DatePicker.pug

.yydh-div.datepicker(style="width: 2rem")
    +DatePicker({inputClass: 'datepickers'})

.yydh-div.datepicker(style="width: 3rem")
    +DatePicker({datePickerClass: 'datepickers2', type: '2', inputStartClass: 'start', inputStartPlaceholder: '年-月-日',inputEndPlaceholder: '结束时间', inputEndClass: 'end', separate: '至'})
// xxx.js部分
// 自己在pug添加所需js
// 引入插件的js和css
link(rel="stylesheet" type="text/css" href="./lib/css/daterangepicker3.14.1.css")
script(type="text/javascript" src="./lib/js/moment2.18.1.min.js")
script(type="text/javascript" src="./lib/js/daterangepicker3.1.min.js")
$('.datepickers').daterangepicker({
    locale: {
        "format": 'YYYY-MM-DD',
        "separator": " 至 ",
        "applyLabel": "确定",
        "cancelLabel": "取消",
        "resetLabel": "重置",
        "fromLabel": "起始时间",
        "toLabel": "结束时间'",
        "customRangeLabel": "自定义",
        "weekLabel": "W",
        "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
        "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        "firstDay": 1,
    },
    "autoUpdateInput": false,
    "showDropdowns": true,
    "singleDatePicker":false,
    "alwaysShowCalendars": true,
    "startDate": moment().subtract(6, 'days'),  //7天前
    "endDate": new Date(),                      //现在
    "opens": "right",
    "linkedCalendars": false,
    "maxDate": new Date(),
})
// 点击取消
$('.datepickers').on('cancel.daterangepicker', function(ev, picker) {
    $('.datepickers').val('');
});
// 点击确定
$('.datepickers').on('apply.daterangepicker', function(ev, picker) {
    $('.datepickers').data('daterangepicker').autoUpdateInput=true;
    console.log(picker.startDate.format('YYYY-MM-DD'));
    console.log(picker.endDate.format('YYYY-MM-DD'));
});

$('.datepickers2').daterangepicker({
    locale: {
        "format": 'YYYY-MM-DD',
        "separator": " 至 ",
        "applyLabel": "确定",
        "cancelLabel": "取消",
        "resetLabel": "重置",
        "fromLabel": "起始时间",
        "toLabel": "结束时间'",
        "customRangeLabel": "自定义",
        "weekLabel": "W",
        "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
        "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        "firstDay": 1,
    },
    "autoUpdateInput": false,
    "showDropdowns": true,
    "singleDatePicker":false,
    "alwaysShowCalendars": true,
    "startDate": moment().subtract(6, 'days'),  //7天前
    "endDate": new Date(),                      //现在
    "opens": "right",
    "linkedCalendars": false,
    "maxDate": new Date(),
})
// 点击取消
$('.datepickers2').on('cancel.daterangepicker', function(ev, picker) {
    $('.start').val('');
    $('.end').val('');
});
// 点击确定
$('.datepickers2').on('apply.daterangepicker', function(ev, picker) {
    console.log(picker.startDate.format('YYYY-MM-DD'));
    console.log(picker.endDate.format('YYYY-MM-DD'));
    $('.start').val(picker.startDate.format('YYYY-MM-DD'));
    $('.end').val(picker.endDate.format('YYYY-MM-DD'));
});

| 参数 | 类型 | 例子 |备注 | |-----|-----|------|------| | obj | object | {datePickerClass: 'datepickers2', type: '2',placeholder: '11111', inputStartClass: 'start', inputStartPlaceholder: '年-月-日',inputEndPlaceholder: '结束时间', inputEndClass: 'end', separate: '-'} | 见下一个表格 |

| key | 类型 | 例子 |备注 | |-----|-----|------|------| | datePickerClass | string | 'datePickerClass' | 用于初始化的class | | type | string | '1' or '2' | 1：单输入框类型 2：双输入框类型 | | placeholder | string | '选择日期' | 单input框input无值的时候显示的内容 | | inputStartClass | string | 'start' | 用于多input框input 左侧开始时间赋值的类名 | | inputStartPlaceholder | string | '选择日期' | 多input框input 左侧开始时间无值的时候显示的内容 | | inputEndClass | string | 'end' | 用于多input框input 右侧结束时间赋值的类名 | | inputEndPlaceholder | string | '选择日期' | 多input框input 右侧结束时间无值的时候显示的内容 | | separate | string | '至' | 多input框 左右两侧时间中间的间隔符 |

12. CmCard （卡片）

在需要应用的地方

// xxx.pug部分
// 引入
include ../../../components/CmCard.pug

// 说明
// 1. card的大小取决于card外层的盒子大小
// 2. 鼠标移入样式，取决于自己自定义的css（组件内部会有个默认的）
// 3. 特殊样式需要自己加css解决
.yydh-div(style="width: 4rem;height: 3rem;display: inline-block;margin-top: 0.2rem;").act-big.yydh-cm-card6
    +CmCard({imgName:"lunbo-big.png", lineClamp: '2',textPosition: 'in' , text: '自定义文字自定义文字自定义文字自定义文字自定义文字自定义文字自定义文字自定义文字自定义文字自定义文字自定义文字自定义文字自定义文字自定义文字自定义文字'})
    // 自定义需要得css
    style. 
        .yydh-cm-card6 img {height: 100%; object-fit: cover;}

| 参数 | 类型 | 例子 |备注 | |-----|-----|------|------| | obj | object | {imgName:"lunbo-big.png", lineClamp: '2',textPosition: 'in' , text: '自定义文字自定义文字自定义文字自定义文字自定义文字自定义文字自定义文字自定义文字自定义文字自定义文字自定义文字自定义文字自定义文字自定义文字自定义文字'} | 见下一个表格 |

| key | 类型 | 例子 |备注 | |-----|-----|------|------| | imgName | string | 'lunbo-big.png' |需要展示的图片名称，在自己项目内部 | | text | string | '自定义标题' | 标题 | | textPosition | string | 'bottom' or 'in' | bottom或者不传为默认上图下文模式，in: 文字在图片里面| | lineClamp | string | '1' or '2' or '3'| 默认一行移除隐藏 |

13. HoverShow （移入显示）

在需要应用的地方

// xxx.pug部分
// 引入
include ../../../components/HoverShow.pug

// 说明
// 1. 外层必须类名cm-hoverShowOut
// 2. 内层必须类名cm-hoverShowIn, 方向也直接定义在此类上（top/bottom/left/right）
// 3. 特殊样式需要自己加css解决
.yydh-div(style="padding:1.5rem;")
    .hovershow(style="display:inline-block;width:2rem;margin-bottom:1.5rem;")
        +HoverShow({placement:'top'})
    .hovershow(style="display:inline-block;width:2rem;margin-bottom:1.5rem;")
        +HoverShow({placement:'bottom'})
    .hovershow(style="display:inline-block;width:2rem;margin-bottom:1.5rem;")
        +HoverShow({placement:'left'})
    .hovershow(style="display:inline-block;width:2rem;margin-bottom:1.5rem;")
        +HoverShow({placement:'right'})
    .hovershow(style="display:inline-block;width:2rem;margin-bottom:1.5rem;")
    +HoverShow()
        .cm-hoverShowOut(style="width: 2rem;background: red;")
            p(style="font-size:0.16rem;color: #333;line-height: 1rem; text-align: center;") 自定义
            .cm-hoverShowIn.bottom
                p(style="font-size:0.16rem;color: #333;line-height: 1rem; text-align: center;") 自定义chulai 

| 参数 | 类型 | 例子 |备注 | |-----|-----|------|------| | obj | object | {placement:"bottom"} | 见下一个表格 |

| key | 类型 | 例子 |备注 | |-----|-----|------|------| | placement | string | 'bottom' |方向 |

版本更新

--------------- 2023-02-02-------------------

优化之前的组件，新增hovershow组件

--------------- 2022-12-27-------------------

优化之前的组件，新增datepicker组件

--------------- 2022-12-05-------------------

cmtab组件支持自定义内部内容

--------------- 2022-11-18-------------------

完善 readme 文档建设

--------------- 2022-11-09-------------------

项目初始化