@trscd/trs-page-html NPM

这是一个pug模板储存仓库

使用

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

简述

相关的公共css文件在项目中已有储存，这个地方备份了一份。
这里只是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