这是一个pug模板储存仓库

使用

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

简述

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

组件一览

1. HotNew （新闻头条）

在需要应用的地方

// xxx.pug部分
include ../../../src/pug/part/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 ../../../src/pug/part/NewsList.pug

.yydh-div
    +NewsList(6)

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

3. SlideNav （侧边导航）

在需要应用的地方

// xxx.pug部分
include ../../../src/pug/part/SlideNav.pug

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

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

4. FriendshipLinks （友情链接）

在需要应用的地方

// xxx.pug部分
include ../../../src/pug/part/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 ../../../src/pug/part/CmPage.pug

.yydh-div
    +CmPage()

5. Location （当前位置）

在需要应用的地方

// xxx.pug部分
include ../../../src/pug/part/Location.pug

.yydh-div
    +Location()

6. CmTab （切换）

在需要应用的地方

// xxx.pug部分
include ../../../src/pug/part/CmTab.pug

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

// 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 |

7. NewsPicCarousel （轮播）

在需要应用的地方

// xxx.pug部分
include ../../../src/pug/part/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为显示左右两个箭头，其他不显示 |

8. Banner （大图轮播）

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

// xxx.pug部分
include ../../../src/pug/part/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为显示左右两个箭头，其他不显示 |

版本更新

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

完善 readme 文档建设

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

项目初始化