Trs-page-html NPM

这是一个pug模板储存仓库

使用

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

简述

相关的公共css文件在项目中已有储存，这个地方备份了一份。
这里只是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为显示左右两个箭头，其他不显示