567 lines
19 KiB
Vue
567 lines
19 KiB
Vue
<template>
|
|
<div>
|
|
<div class="ban"></div>
|
|
<div class="contant">
|
|
<div class="PageBox">
|
|
<div class="scrollbox cl">
|
|
<!-- <div class="scroltit">
|
|
<small id="but_up"><img src="img/icon6.png"></small>
|
|
<small id="but_down"><img src="img/icon6_1.png"></small>
|
|
</div> -->
|
|
<!-- 头条 -->
|
|
<div id="scrollDiv">
|
|
<!-- <ul>
|
|
<li v-for="(tt,ttIndex) in ttList" :key="ttIndex">
|
|
<a href="javascript:void(0);">
|
|
<h2>{{tt.title}}</h2>
|
|
<p class="elli">{{$tfnm(tt,'content',84)}}</p>
|
|
</a>
|
|
</li>
|
|
</ul> -->
|
|
<el-carousel height="100px" direction="vertical" :autoplay="true" indicator-position="outside">
|
|
<el-carousel-item v-for="(tt,ttIndex) in ttList" :key="ttIndex" class="toutiaoItem">
|
|
<h2 class="toutiaoH" @click="$to('detailedPage',{id:tt.id})">{{tt.title}}</h2>
|
|
<p class="elli" @click="$to('detailedPage',{id:tt.id})">{{$tfnm(tt,'content',60)}}</p>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
</div>
|
|
<div class="PageOne clearfloat">
|
|
<div class="PageOneL left">
|
|
<div id="inlunbo" class="pos1">
|
|
<el-carousel height="400px">
|
|
<el-carousel-item v-for="(lbt,lbtIndex) in lbtList" :key="lbtIndex">
|
|
<a href="javascript:void(0);" @click="$to('detailedPage',{id:lbt.id})"><img :src="$tImg(lbt,'cover')"></a>
|
|
<div class="luntxt">
|
|
<a href="javascript:void(0);" class="ltxta elli" @click="$to('detailedPage',{id:lbt.id})">{{lbt.title}}</a>
|
|
</div>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
<!-- <ul id="inlunone">
|
|
<li class="lunactive" v-for="(lbt,lbtIndex) in lbtList" :key="lbtIndex">
|
|
<a href="javascript:void(0);"><img :src="$tImg(lbt,'cover')"></a>
|
|
<div class="luntxt">
|
|
<a href="javascript:void(0);" class="ltxta elli">{{lbt.title}}</a>
|
|
</div>
|
|
</li>
|
|
</ul> -->
|
|
<!-- <ul id="inluntwo">
|
|
<li class="lunactive">1</li>
|
|
<li>2</li>
|
|
<li>3</li>
|
|
</ul> -->
|
|
</div>
|
|
</div>
|
|
<div class="PageOneR right">
|
|
<div id="menu">
|
|
<div class="PageOneRUp">
|
|
<ul id="nav">
|
|
<li><a href="javascript:void(0);" :class="currentTab == 301 ? 'selected' : ''" @click="changeTab(301)">工作动态</a></li>
|
|
<li><a href="javascript:void(0);" :class="currentTab == 302 ? 'selected' : ''" @click="changeTab(302)">行业要闻</a></li>
|
|
</ul>
|
|
<a href="javascript:void(0);" class="gengdduo right" @click="$to('listPage',{pid:currentTab})">more+</a>
|
|
</div>
|
|
<div id="menu_con">
|
|
<div class="tag" v-show="currentTab == 301">
|
|
<template v-if="gzdtList && gzdtList.length > 0">
|
|
<ul>
|
|
<li>
|
|
<span class="tagup" @click="$to('detailedPage',{id:gzdtList[0].id})">
|
|
<h3 class="elli">{{gzdtList[0].title}}</h3>
|
|
<p class="over-line2">{{$tfnm(gzdtList[0],'content',84)}}</p>
|
|
</span>
|
|
</li>
|
|
<li v-for="(gzdt,gzdtIndex) in gzdtList" :key="gzdtIndex" >
|
|
<template v-if="gzdtIndex>0">
|
|
<a class="clearfloat" href="javascript:void(0);" @click="$to('detailedPage',{id:gzdt.id})">
|
|
<h3 class="elli">{{gzdt.title}}</h3>
|
|
<span>{{gzdt.createTime}}</span>
|
|
</a>
|
|
</template>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
</div>
|
|
<div class="tag" v-show="currentTab == 302">
|
|
<template v-if="hyywList && hyywList.length > 0">
|
|
<ul>
|
|
<li>
|
|
<span class="tagup" @click="$to('detailedPage',{id:hyywList[0].id})">
|
|
<h3 class="elli">{{hyywList[0].title}}</h3>
|
|
<p class="over-line2">{{$tfnm(hyywList[0],'content',84)}}</p>
|
|
</span>
|
|
</li>
|
|
<li v-for="(hyyw,hyywIndex) in hyywList" :key="hyywIndex" >
|
|
<template v-if="hyywIndex>0">
|
|
<a class="clearfloat" href="javascript:void(0);" @click="$to('detailedPage',{id:hyyw.id})">
|
|
<h3 class="elli">{{hyyw.title}}</h3>
|
|
<span>{{hyyw.createTime}}</span>
|
|
</a>
|
|
</template>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="kjrukou">
|
|
<ul>
|
|
<li>
|
|
<a href="javascript:void(0);" @click="$to('listPage',{pid:102,id:10201})">
|
|
<span class="spanmg"><img src="img/k_01.png" ></span>
|
|
<span class="spanmg1" style="display: none;"><img src="img/k_01-1.png" ></span>
|
|
<h3>特色农业产业化</h3>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0);" @click="$to('listPage',{pid:401,id:40101})">
|
|
<span class="spanmg"><img src="img/k_02.png" ></span>
|
|
<span class="spanmg1" style="display: none;"><img src="img/k_02-2.png" ></span>
|
|
<h3>数据中心</h3>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0);" @click="$to('listPage',{pid:104,id:10404})">
|
|
<span class="spanmg"><img src="img/k_03.png" ></span>
|
|
<span class="spanmg1" style="display: none;"><img src="img/k_03-3.png" ></span>
|
|
<h3>棚膜经济</h3>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0);" @click="$to('listPage',{pid:104,id:10403})">
|
|
<span class="spanmg"><img src="img/k_04.png" ></span>
|
|
<span class="spanmg1" style="display: none;"><img src="img/k_04-4.png" ></span>
|
|
<h3>农产品安全</h3>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0);" @click="$to('listPage',{pid:103,id:10303})">
|
|
<span class="spanmg"><img src="img/k_05.png" ></span>
|
|
<span class="spanmg1" style="display: none;"><img src="img/k_05-5.png" ></span>
|
|
<h3>中部粮食资源</h3>
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0);" @click="$to('listPage',{pid:102,id:10203})">
|
|
<span class="spanmg"><img src="img/k_06.png" ></span>
|
|
<span class="spanmg1" style="display: none;"><img src="img/k_06-6.png" ></span>
|
|
<h3>畜牧业产业化</h3>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hzjlbox">
|
|
<div class="hzjl clearfloat">
|
|
<div class="h_l left">
|
|
<div class="h_lup clearfloat">
|
|
<span class="h_lupl left">合作<span class="h_luph">交流</span></span>
|
|
<a href="javascript:void(0);" class="right" @click="$to('listPage',{pid:303})">more+</a>
|
|
</div>
|
|
<div class="h_ldown">
|
|
<ul>
|
|
<li v-for="(hzjl,hzjlIndex) in hzjlList" :key="hzjlIndex">
|
|
<a href="javascript:void(0);" class="elli" @click="$to('detailedPage',{id:hzjl.id})">
|
|
<span></span>
|
|
{{hzjl.title}}
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="h_r right">
|
|
<div class="h_lup clearfloat">
|
|
<span class="h_lupl left">科研<span class="h_luph">成果</span></span>
|
|
<a href="javascript:void(0);" class="right" @click="$to('listPage',{pid:304})">more+</a>
|
|
</div>
|
|
<div class="h_rdown">
|
|
<ul>
|
|
<li v-for="(kycg,kycgIndex) in kycgList" :key="kycgIndex">
|
|
<a href="javascript:void(0);" @click="$to('detailedPage',{id:kycg.id})">
|
|
<span class="spimg"><img :src="$tImg(kycg,'cover')" ></span>
|
|
<h3 class="over-line2">{{kycg.title}}</h3>
|
|
<p>{{$tfnm(kycg,'content',58)}}<span>[详情]</span></p>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="zcwjbox clearfloat">
|
|
<div class="h_l left">
|
|
<div class="h_lup clearfloat">
|
|
<span class="h_lupl left">政策<span class="h_luph">文件</span></span>
|
|
<a href="javascript:void(0);" class="right" @click="$to('listPage',{pid:305})">more+</a>
|
|
</div>
|
|
<div class="z_ldown">
|
|
<template v-if="zcwjList && zcwjList.length > 0">
|
|
<a href="javascript:void(0);" class="zxwjbox clearfloat" @click="$to('detailedPage',{id:zcwjList[0].id})">
|
|
<span class="z_img left" @click="$to('detailedPage',{id:zcwjList[0].id})"><img src="img/zxwj.png" ></span>
|
|
<h3 class="over-line2 left" @click="$to('detailedPage',{id:zcwjList[0].id})">{{zcwjList[0].title}}</h3>
|
|
<span class="z_date right" @click="$to('detailedPage',{id:zcwjList[0].id})">{{getMonthAndDay(zcwjList[0].updateTime || zcwjList[0].createTime)}}</span>
|
|
</a>
|
|
<ul>
|
|
<li v-for="(zcwj,zcwjIndex) in zcwjList" :key="zcwjIndex">
|
|
<a v-if="zcwjIndex>0" href="javascript:void(0);" class="clearfloat" @click="$to('detailedPage',{id:zcwj.id})">
|
|
<span class="jiantou left">></span>
|
|
<h4 class="over-line2 left" >{{zcwj.title}}</h4>
|
|
<span class="c_span right">{{getMonthAndDay(zcwj.updateTime || zcwj.createTime)}}</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
<div class="h_r right">
|
|
<div class="h_lup clearfloat">
|
|
<span class="h_lupl left">特色农业资源<span class="h_luph">最新动态</span></span>
|
|
<a href="javascript:void(0);" class="right" @click="$to('listPage',{pid:306})">more+</a>
|
|
</div>
|
|
<div class="c_rdown clearfloat">
|
|
<template v-if="tsnyzyList && tsnyzyList.length > 0">
|
|
<div class="c_rdownl left">
|
|
<a href="javascript:void(0);" class="gredsgre over-line2" @click="$to('detailedPage',{id:tsnyzyList[0].id})">{{tsnyzyList[0].title}}</a>
|
|
<div class="c_sdfimg" @click="$to('detailedPage',{id:tsnyzyList[0].id})"><img :src="$tImg(tsnyzyList[0],'cover')" ></div>
|
|
<p class="over-line2" @click="$to('detailedPage',{id:tsnyzyList[0].id})">{{$tfnm(tsnyzyList[0],'content',84)}}</p>
|
|
<div class="clearfloat">
|
|
<a href="javascript:void(0);" class="left" style="font-size: 14px;color: #EE8515;" @click="$to('detailedPage',{id:tsnyzyList[0].id})">[阅读]</a>
|
|
<span class="right" style="color: #999999;font-size: 14px;">{{getMonthAndDay(tsnyzyList[0].updateTime || tsnyzyList[0].createTime)}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="z_ldown right" style="width: 384px;">
|
|
<ul>
|
|
<li v-for="(tsnyzy,tsnyzyIndex) in tsnyzyList" :key="tsnyzyIndex">
|
|
<a href="javascript:void(0);" class="clearfloat" @click="$to('detailedPage',{id:tsnyzy.id})">
|
|
<span class="jiantou left">></span>
|
|
<h4 class="over-line2 left">{{tsnyzy.title}}</h4>
|
|
<span class="c_span right">{{getMonthAndDay(tsnyzy.updateTime || tsnyzy.createTime)}}</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ztzlbox">
|
|
<div class="ztzl">
|
|
<div class="h_lup clearfloat">
|
|
<span class="h_lupl left">专题<span class="h_luph">专栏</span></span>
|
|
<a href="javascript:void(0);" class="right" @click="$to('listPage',{pid:501,id:50101})">more+</a>
|
|
</div>
|
|
<div class="ztzldown" style="margin-top: 20px;">
|
|
<ul class="clearfloat">
|
|
<li>
|
|
<a href="javascript:void(0);" @click="$to('listPage',{pid:501,id:50101})"><img src="img/zt_1.png" ></a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0);" @click="$to('listPage',{pid:501,id:50102})"><img src="img/zt_2.png" ></a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0);" @click="$to('listPage',{pid:501,id:50103})"><img src="img/zt_3.png" ></a>
|
|
</li>
|
|
<li>
|
|
<a href="javascript:void(0);" @click="$to('listPage',{pid:501,id:50104})"><img src="img/zt_4.png" ></a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { getAction } from '@/api/manage'
|
|
import { getwayMixin } from '@/views/gateway/mixins/getwayMixin'
|
|
import vueSeamlessScroll from './vue-seamless-scroll'
|
|
|
|
export default {
|
|
mixins:[getwayMixin],
|
|
components:{ vueSeamlessScroll },
|
|
props:{
|
|
},
|
|
data(){
|
|
return {
|
|
window,
|
|
ttList:[], //头条
|
|
lbtList:[], //轮播图
|
|
gzdtList:[], //工作动态
|
|
hyywList:[], //行业要闻
|
|
hzjlList:[], //合作交流
|
|
kycgList:[], //科研成果
|
|
zcwjList:[], //政策文件
|
|
tsnyzyList:[], //特色农业资源最新动态
|
|
tzggList:[],
|
|
linksKsdhList:[],
|
|
linksYqljList:[],
|
|
classOption: {
|
|
limitMoveNum: 2,
|
|
direction: 2,
|
|
},
|
|
carouselHeight: '',
|
|
currentTab:301,
|
|
}
|
|
},
|
|
computed:{
|
|
},
|
|
mounted(){
|
|
this.loadData();
|
|
const that = this
|
|
let load = () => {
|
|
return (() => {
|
|
let image = document.querySelector('.el-carousel__item.is-active.is-animating img')
|
|
that.refreshImageHeight(image);
|
|
})()
|
|
};
|
|
//当页面大小变动时，更新高度
|
|
window.onresize = load;
|
|
// window.onload = load;
|
|
},
|
|
updated(){
|
|
// this.$nextTick(() => {
|
|
// let image = document.querySelector('.el-carousel__item.is-active.is-animating img')
|
|
// this.refreshImageHeight(image);
|
|
// })
|
|
},
|
|
methods:{
|
|
loadData(){
|
|
// console.log('main.vue.this =>',this);
|
|
//头条
|
|
getAction('/gateway/gatewayArticle/list',{pageSize:3,isRelease:'Y',columnId:'201',column: 'createTime',order: 'desc'}).then((res)=>{
|
|
if(res.success){
|
|
let list = res.result.records||res.result;
|
|
this.ttList = list;
|
|
}
|
|
});
|
|
|
|
|
|
//轮播图
|
|
getAction('/gateway/gatewayArticle/list',{pageSize:3,isRelease:'Y',type:'首页轮播',column: 'createTime',order: 'desc'}).then((res)=>{
|
|
if(res.success){
|
|
let list = res.result.records||res.result;
|
|
console.log('====>>>',list);
|
|
// this.articleList = list;
|
|
this.lbtList = list;
|
|
// if(list && list.length){
|
|
// console.log(list,list[0],this.$tImg(list[0],'cover'),this);
|
|
//用第一张图刷新高度
|
|
// this.refreshImageHeightByUrl(this.$tImg(list[0],'cover'));
|
|
// }
|
|
}
|
|
});
|
|
//工作动态
|
|
getAction('/gateway/gatewayArticle/list',{pageSize:7,isRelease:'Y',columnId:'301',column: 'createTime',order: 'desc'}).then((res)=>{
|
|
if(res.success){
|
|
let list = res.result.records||res.result;
|
|
// this.articleList = list;
|
|
this.gzdtList = list;
|
|
}
|
|
});
|
|
//行业要闻
|
|
getAction('/gateway/gatewayArticle/list',{pageSize:7,isRelease:'Y',columnId:'302',column: 'createTime',order: 'desc'}).then((res)=>{
|
|
if(res.success){
|
|
let list = res.result.records||res.result;
|
|
// this.articleList = list;
|
|
this.hyywList = list;
|
|
}
|
|
});
|
|
//合作交流
|
|
getAction('/gateway/gatewayArticle/list',{pageSize:8,isRelease:'Y',columnId:'303',column: 'createTime',order: 'desc'}).then((res)=>{
|
|
if(res.success){
|
|
let list = res.result.records||res.result;
|
|
// this.articleList = list;
|
|
this.hzjlList = list;
|
|
}
|
|
});
|
|
//科研成果
|
|
getAction('/gateway/gatewayArticle/list',{pageSize:3,isRelease:'Y',columnId:'304',column: 'createTime',order: 'desc'}).then((res)=>{
|
|
if(res.success){
|
|
let list = res.result.records||res.result;
|
|
// this.articleList = list;
|
|
this.kycgList = list;
|
|
}
|
|
});
|
|
//政策文件
|
|
getAction('/gateway/gatewayArticle/list',{pageSize:4,isRelease:'Y',columnId:'305',column: 'createTime',order: 'desc'}).then((res)=>{
|
|
if(res.success){
|
|
let list = res.result.records||res.result;
|
|
// this.articleList = list;
|
|
this.zcwjList = list;
|
|
}
|
|
});
|
|
//特色农业资源最新动态
|
|
getAction('/gateway/gatewayArticle/list',{pageSize:4,isRelease:'Y',columnId:'306',column: 'createTime',order: 'desc'}).then((res)=>{
|
|
if(res.success){
|
|
let list = res.result.records||res.result;
|
|
// this.articleList = list;
|
|
this.tsnyzyList = list;
|
|
}
|
|
});
|
|
|
|
|
|
//通知公告
|
|
getAction('/gateway/gatewayArticle/list',{pageSize:4,isRelease:'Y',columnId:'3',column: 'createTime',order: 'desc'}).then((res)=>{
|
|
if(res.success){
|
|
let list = res.result.records||res.result;
|
|
// this.articleList = list;
|
|
this.tzggList = list;
|
|
}
|
|
});
|
|
//快速导航
|
|
getAction('/gateway/gatewayLinks/list',{pageSize:-1,isEnable:'Y',type:'快速导航',column: 'createTime',order: 'desc'}).then((res)=>{
|
|
if(res.success){
|
|
let list = res.result.records||res.result;
|
|
this.linksKsdhList = list;
|
|
}
|
|
});
|
|
//友情链接
|
|
getAction('/gateway/gatewayLinks/list',{pageSize:-1,isEnable:'Y',type:'友情链接',column: 'createTime',order: 'desc'}).then((res)=>{
|
|
if(res.success){
|
|
let list = res.result.records||res.result;
|
|
this.linksYqljList = list;
|
|
}
|
|
});
|
|
},
|
|
|
|
//工作动态、行业要闻切换
|
|
changeTab(index){
|
|
this.currentTab = index;
|
|
},
|
|
|
|
getDay(dateTime){
|
|
if(!dateTime) return '';
|
|
let d = new Date(dateTime);
|
|
return d.getDate()
|
|
},
|
|
getYearAndMonth(dateTime){
|
|
if(!dateTime) return '';
|
|
let d = new Date(dateTime);
|
|
return d.getFullYear() + '-' + (d.getMonth()+1)
|
|
},
|
|
//根据image对象刷新高度
|
|
refreshImageHeight(image){
|
|
const that = this
|
|
if(!image){
|
|
that.carouselHeight = '';
|
|
return;
|
|
}
|
|
let url = image.src;
|
|
this.refreshImageHeightByUrl(url);
|
|
},
|
|
//刷新轮播图高度
|
|
refreshImageHeightByUrl(url){
|
|
const that = this
|
|
let nImg = new Image();
|
|
nImg.src = url;
|
|
if(!nImg.height){
|
|
that.carouselHeight = '';
|
|
return;
|
|
}
|
|
let width = nImg.width;
|
|
let height = nImg.height;
|
|
|
|
let maxWidth = document.body.offsetWidth;
|
|
// let maxHeight = document.body.offsetHeight;
|
|
|
|
let widthProportion = maxWidth/width;
|
|
that.carouselHeight = (height*widthProportion) + 'px';
|
|
},
|
|
//由轮播图变换触发的
|
|
changeCarouselHeight(index){
|
|
let image = document.querySelectorAll('.d1')[index];
|
|
this.refreshImageHeight(image);
|
|
},
|
|
|
|
getDay(dateTime){
|
|
if(!dateTime) return '';
|
|
let d = new Date(dateTime);
|
|
return d.getDate()
|
|
},
|
|
getMonthAndDay(dateTime){
|
|
if(!dateTime) return '';
|
|
let d = new Date(dateTime);
|
|
return (d.getMonth()+1) + '-' + d.getDate();
|
|
},
|
|
getYearAndMonth(dateTime){
|
|
if(!dateTime) return '';
|
|
let d = new Date(dateTime);
|
|
return d.getFullYear() + '-' + (d.getMonth()+1)
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
.warp {
|
|
width: 1264px;
|
|
height: 120px;
|
|
margin: 0 auto;
|
|
overflow: hidden;
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0 auto;
|
|
&.ul-item {
|
|
display: flex;
|
|
.li-item {
|
|
width: 120px;
|
|
height: 120px;
|
|
margin-right: 10px;
|
|
line-height: 120px;
|
|
background-color: #999;
|
|
color: #fff;
|
|
text-align: center;
|
|
font-size: 30px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.OneTxt2{
|
|
font-size:2rem;
|
|
.OneTxt2_txt{
|
|
position: relative;
|
|
z-index: 2;
|
|
color:#006876;
|
|
}
|
|
.OneTxt2_back{
|
|
width: 8rem;
|
|
height: 1rem;
|
|
border-radius: 1%;
|
|
background-color: #fdf9d9;
|
|
position: relative;
|
|
z-index: 1;
|
|
top: -1rem;
|
|
}
|
|
}
|
|
.toutiaoItem{
|
|
width: 100%;
|
|
height: 100px;
|
|
padding: 10px;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
transition: 0.5s all;
|
|
-webkit-transition: 0.5s all;
|
|
-moz-transition: 0.5s all;
|
|
-o-transition: 0.5s all;
|
|
}
|
|
.toutiaoH{
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
margin-top: 8px;
|
|
margin-bottom: 10px;
|
|
color: #333;
|
|
}
|
|
|
|
|
|
</style> |