<template>
<div>
<!-- 页面头部 -->
<HomePageHead></HomePageHead>
<!-- 页面导航 -->
<HomePageNavigation></HomePageNavigation>
<!-- 大标题 -->
<HomeBigTitle></HomeBigTitle>
<!-- 大标题下的列表 -->
<HomeBigTitleList></HomeBigTitleList>
<!-- 资讯 -->
<HomePageMessage></HomePageMessage>
<!-- 十强称号logo -->
<HomeTopTenTitle></HomeTopTenTitle>
<!-- 更多服务 -->
<HomeMoreService></HomeMoreService>
<!-- 农副产品十强光荣称号logo -->
<HomeTopTen></HomeTopTen>
<!-- 农民工 -->
<div class="farming">
<div class="inner">
<div class="farmerLeft">
<div class="farmer">
<h3>
农民工
<span>查看更多</span>
</h3>
<ul>
<li v-for="item in 10">
<em></em>
<span>高邮市周山镇开展渔业安全生产应急演</span>
</li>
</ul>
</div>
<div class="farmerbottom">
<img class="left"
src="../static/images/rgmezdvz_19982_A_Chinese_farmer_carrying_a_hoe_is_hoeing_the_fi_a036c7b3-b05e-4d3d-a371-0bed91ec1ff8.png"
alt="">
<ul class="leftList left">
<li>
<h4>
<em></em>
仪征市农业农村局召开
</h4>
<p>高邮市周山镇开展渔业安全生产应急高邮市周山镇开展渔业</p>
</li>
<li>
<h4>
<em></em>
仪征市农业农村局召开
</h4>
<p>高邮市周山镇开展渔业安全生产应急高邮市周山镇开展渔业</p>
</li>
<li>
<h4>
<em></em>
仪征市农业农村局召开
</h4>
<p>高邮市周山镇开展渔业安全生产应急高邮市周山镇开展渔业</p>
</li>
</ul>
</div>
</div>
<div class="farmerRight">
<!-- 致富信息 -->
<div class="rich">
<h3>
致富信息
<span>查看更多</span>
</h3>
<div class="photo">
<div class="photoL">
<img src="../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_d25af056-9d57-4ffe-9b04-030082de8a2b.png"
alt="">
<span>高邮市周山镇开展渔业</span>
</div>
<div class="photoR">
<img src="../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_bb6f6cc3-e86b-4706-840c-0974beef5b2f.png"
alt="">
<span>高邮市周山镇开展渔业</span>
</div>
</div>
<ul>
<li v-for="item in 3">
<em></em>
<span>高邮市周山镇开展渔业安全生产应急演</span>
</li>
</ul>
</div>
<!-- 三农调查 -->
<div class="inquire">
<h3>
三农调查
<span>查看更多</span>
</h3>
<p>郑州17名警察因出警慢被关禁闭,你怎么看?</p>
<!-- <el-checkbox-group v-model="checkList">
<el-checkbox label="Option A" value="Value A" />
<el-checkbox label="Option B" value="Value B" />
<el-checkbox label="Option C" value="Value C" />
</el-checkbox-group> -->
</div>
</div>
</div>
</div>
<!-- 十强称号logo -->
<HomeTopTenTitle></HomeTopTenTitle>
<!-- 三农科教 -->
<div class="scienceEducation">
<div class="inner">
<!-- 左侧 -->
<div class="scienceLeft">
<!-- 标题部分 -->
<div class="scienceTitle">
<h5>三农科教</h5>
<p>
<span>
<a href="#">农产畅销</a>
</span>
<span>
<a href="#">农业在线</a>
</span>
<span>
<a href="#">农产行情</a>
</span>
<span>
<a href="#">名优特产</a>
</span>
</p>
</div>
<ul class="scienceList">
<li v-for="item in 6">
<img src="../static/images/sgbhsihfgisdfaasda45632113_A_Chinese_farmer_carrying_a_hoe_is_h_a23e4b96-a6d7-49e1-a283-68c395f277f9.png"
alt="">
<p>市农业农村局关于印发连云港市市级…</p>
</li>
</ul>
</div>
<!-- 右侧 -->
<div class="scienceRight">
<!-- 标题部分 -->
<h3>
三农之窗
<span>查看更多</span>
</h3>
<!-- 轮播图 -->
<div class="banner">
<img src="../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_bb6f6cc3-e86b-4706-840c-0974beef5b2f(1).png"
alt="">
</div>
<!-- 轮播图下小图列表 及内容列表 -->
<div class="banner_b_img">
<div class="photo">
<div class="photoL">
<img src="../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_d25af056-9d57-4ffe-9b04-030082de8a2b.png"
alt="">
<span>高邮市周山镇开展渔业</span>
</div>
<div class="photoR">
<img src="../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_bb6f6cc3-e86b-4706-840c-0974beef5b2f.png"
alt="">
<span>高邮市周山镇开展渔业</span>
</div>
</div>
<ul>
<li v-for="item in 5">
<em></em>
<span>高邮市周山镇开展渔业安全生产应急演活动</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 三农资讯logo -->
<HomeSannongzixun></HomeSannongzixun>
<!--打假维权 动态 -->
<div class="dynamic">
<div class="inner">
<div class="innerLeft">
<!-- 标题部分 -->
<div class="title">
<h3>
打假维权
<span>查看更多</span>
</h3>
</div>
<!-- 维权 protect rights -->
<div class="protectRights">
<div class="photoList">
<div class="top">
<img src="../static/images/tonny00255_On(1).png" alt="">
<span>扬州市邗江区开展2021年度下半年…</span>
</div>
<ul class="bottom">
<li v-for="item in 2">
<img src="../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_d25af056-9d57-4ffe-9b04-030082de8a2b(2).png"
alt="">
<p>仪征市农业农村局召开党的十九届…</p>
</li>
</ul>
</div>
<ul class="textList">
<li v-for="item in 6">
<h4>
<em></em>
仪征市农业农村局召开
</h4>
<p>高邮市周山镇开展渔业安全生产应急高邮市周山镇开展渔业</p>
</li>
</ul>
</div>
</div>
<div class="innerRight">
<!-- 标题部分 -->
<div class="title">
<h3>
产业动态
<span>查看更多</span>
</h3>
</div>
<ul class="dynamicList">
<li v-for="item in 4">
<img src="../static/images/rgmezdvz_19982_On_a_vast_and_boundless_wheat_field_many_harvest_5b5cfeda-ef17-4551-a935-5f8e3f799b69@2x(1).png"
alt="">
<div class="text">
<h5>高邮市周山镇来战雨夜安全演练</h5>
<p>高邮市周山镇开展渔业安全生产应急高邮市周山镇开展渔业</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- 三农资讯logo -->
<HomeSannongzixun></HomeSannongzixun>
<!--政策法规 -->
<div class="policy">
<div class="inner">
<div class="innerLeft">
<div class="title">
<h3>
政策法规
<span>查看更多</span>
</h3>
</div>
<ul class="policyList">
<li v-for="item in 4">
<img src="../static/images/rgmezdvz_19982_On_a_vast_and_boundless_wheat_field_many_harvest_5b5cfeda-ef17-4551-a935-5f8e3f799b69@2x(1).png"
alt="">
<div class="text">
<h5>高邮市周山镇来战雨夜安全演练</h5>
<p>高邮市周山镇开展渔业安全生产应急高邮市周山镇开展渔业安全周山镇开展渔业安全生产应急</p>
</div>
</li>
</ul>
</div>
<div class="innerRight">
<div class="title">
<h3>
三农之窗
<span>查看更多</span>
</h3>
</div>
<!-- 轮播图 -->
<div class="banner">
<img src="../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_bb6f6cc3-e86b-4706-840c-0974beef5b2f(1).png"
alt="">
</div>
<!-- 轮播图下小图列表 及内容列表 -->
<div class="banner_b_img">
<div class="photo">
<div class="photoL">
<img src="../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_d25af056-9d57-4ffe-9b04-030082de8a2b.png"
alt="">
<span>高邮市周山镇开展渔业</span>
</div>
<div class="photoR">
<img src="../static/images/sgbhsihfgisdfaasda45632113_A_group_of_Chinese_farmers_are_trans_bb6f6cc3-e86b-4706-840c-0974beef5b2f.png"
alt="">
<span>高邮市周山镇开展渔业</span>
</div>
</div>
<ul>
<li>
<em></em>
<span>高邮市周山镇开展渔业安全生产应急演</span>
</li>
<li>
<em></em>
<span>高邮市周山镇开展渔业安全生产应急演</span>
</li>
<li>
<em></em>
<span>高邮市周山镇开展渔业安全生产应急演</span>
</li>
<li>
<em></em>
<span>高邮市周山镇开展渔业安全生产应急演活动</span>
</li>
<li>
<em></em>
<span>高邮市周山镇开展渔业安全生产应急演活动</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 页面底部 -->
<HomeFoot></HomeFoot>
</div>
</template>
<script setup>
</script>
<style lang="less" scoped>
// 农民工
.farming {
width: 100%;
height: 616px;
.farmerLeft,
.farmerRight {
float: left;
}
// 左侧
.farmerLeft {
width: 790px;
height: 616px;
margin-right: 21px;
.farmer {
width: 790px;
height: 330px;
>h3 {
height: 36px;
font-family: Source Han Sans, Source Han Sans;
font-weight: bold;
font-size: 24px;
color: #000000;
line-height: 28px;
text-align: left;
font-style: normal;
text-transform: none;
border-bottom: 1px solid #139602;
>span {
float: right;
width: 56px;
height: 20px;
line-height: 24px;
font-weight: 400;
font-size: 14px;
color: #999999;
font-style: normal;
text-transform: none;
}
}
>ul {
margin-top: 20px;
>li {
float: left;
width: 362px;
height: 22px;
font-weight: 500;
font-size: 18px;
color: #333333;
line-height: 21px;
text-align: left;
margin-bottom: 32px;
margin-right: 27px;
>em {
display: inline-block;
width: 8px;
height: 8px;
background-color: #d9d9d9;
border-radius: 4px;
margin: 5px 8px 6px;
vertical-align: middle;
}
}
>li:hover {
color: #139602;
}
}
}
.farmerbottom {
width: 790px;
height: 280px;
img {
width: 498px;
height: 280px;
}
>.leftList {
width: 290px;
height: 280px;
background-color: #f6f6f6;
padding: 11px 26px 6px 20px;
box-sizing: border-box;
>li {
width: 296px;
height: 75px;
color: #666666;
font-size: 14px;
margin-bottom: 18px;
h4 {
font-family: Source Han Sans, Source Han Sans;
height: 27px;
line-height: 21px;
font-size: 18px;
color: #333333;
em {
display: inline-block;
width: 8px;
height: 8px;
background-color: #333333;
border-radius: 8px;
}
}
p {
width: 249px;
height: 48px;
line-height: 24px;
padding-left: 14px;
}
}
>li:hover,
>li:hover>h4 {
color: #088f04;
}
>li:hover>h4>em {
background-color: #088f04;
}
}
}
}
// 右侧
.farmerRight {
width: 380px;
height: 600px;
.rich,
.inquire {
width: 100%;
height: 309px;
// 标题部分
>h3 {
height: 36px;
font-family: Source Han Sans, Source Han Sans;
font-weight: bold;
font-size: 24px;
color: #000000;
line-height: 28px;
text-align: left;
font-style: normal;
text-transform: none;
border-bottom: 1px solid #139602;
>span {
float: right;
width: 56px;
height: 20px;
line-height: 24px;
font-weight: 400;
font-size: 14px;
color: #999999;
font-style: normal;
text-transform: none;
}
}
// 图片部分
.photo {
height: 104px;
margin-top: 23px;
}
.photoL,
.photoR {
float: left;
width: 185px;
height: 104px;
position: relative;
img {
width: 185px;
height: 104px;
}
span {
position: absolute;
bottom: 0;
left: 0;
display: inline-block;
width: 185px;
height: 30px;
font-weight: 500;
color: #FFFFFF;
padding-top: 7px;
padding-left: 6px;
box-sizing: border-box;
}
}
.photoL {
margin-right: 10px;
}
// 文字部分
ul {
height: 135px;
>li {
height: 25px;
padding-top: 16px;
>em {
display: inline-block;
width: 8px;
height: 8px;
background-color: #d9d9d9;
border-radius: 4px;
margin: 5px 8px 6px 5px;
margin-left: 5px;
vertical-align: middle;
}
>span {
width: 320px;
height: 25px;
font-weight: 500;
font-size: 18px;
color: #333333;
line-height: 21px;
text-align: left;
font-style: normal;
text-transform: none;
padding-left: 10px;
}
>span:hover {
color: #139609;
}
}
}
}
// 三农调查
.inquire {
width: 380px;
height: 280px;
margin-top: 20px;
background: #FFFFFF;
box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.1);
border-radius: 6px 6px 6px 6px;
padding: 4px 6px;
box-sizing: border-box;
p {
width: 328px;
height: 69px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 18px;
color: #333333;
line-height: 21px;
text-align: left;
font-style: normal;
text-transform: none;
padding: 12px 20px 0 32px;
}
}
}
}
//三农科教
.scienceEducation {
height: 590px;
.scienceLeft,
.scienceRight {
float: left;
}
// 左侧
.scienceLeft {
width: 790px;
height: 616px;
margin-right: 21px;
// 标题
.scienceTitle {
height: 37px;
h5 {
float: left;
width: 96px;
height: 34px;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 24px;
color: #000000;
line-height: 28px;
text-align: left;
font-style: normal;
text-transform: none;
margin-right: 20px;
}
>p {
float: left;
height: 37px;
line-height: 30px;
>span {
display: inline-block;
height: 20px;
line-height: 20px;
text-align: center;
margin: 4px 0px 3px;
padding: 0 20px;
border-right: 1px solid #ccc;
>a {
display: inline-block;
padding-bottom: 11px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 20px;
color: #666666;
line-height: 20px;
font-style: normal;
text-transform: none;
box-sizing: border-box;
}
}
>span:nth-child(4) {
border-right: none;
}
>span:hover>a {
color: #139602;
border-bottom: 1px solid #139602;
}
}
}
// 标题下列表
.scienceList {
margin-top: 17px;
>li {
width: 250px;
height: 276px;
float: left;
margin-right: 20px;
position: relative;
>img {
width: 250px;
height: 220px;
}
>p {
height: 56px;
width: 248px;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 18px;
color: #333333;
line-height: 24px;
text-align: left;
font-style: normal;
text-transform: none;
}
>p:hover {
color: #139602;
}
}
>li:nth-child(3),
>li:nth-child(6) {
margin-right: 0;
}
>li::before {
content: "";
display: inline-block;
width: 40px;
height: 20px;
position: absolute;
top: 0;
right: 0;
background-image: url("../static/images/Component 209.png");
}
}
}
// 右侧
.scienceRight {
width: 380px;
height: 600px;
// 标题部分
>h3 {
height: 36px;
font-family: Source Han Sans, Source Han Sans;
font-weight: bold;
font-size: 24px;
color: #000000;
line-height: 28px;
text-align: left;
font-style: normal;
text-transform: none;
border-bottom: 1px solid #139602;
>span {
float: right;
width: 56px;
height: 20px;
line-height: 24px;
font-weight: 400;
font-size: 14px;
color: #999999;
font-style: normal;
text-transform: none;
}
}
// 轮播图
.banner {
width: 380px;
height: 214px;
margin-top: 20px;
}
.banner_b_img {
// 图片部分
.photo {
height: 104px;
margin-top: 23px;
}
.photoL,
.photoR {
float: left;
width: 185px;
height: 104px;
position: relative;
img {
width: 185px;
height: 104px;
}
span {
position: absolute;
top: 0;
left: 0;
display: inline-block;
padding-left: 7px;
box-sizing: border-box;
width: 185px;
height: 22px;
background-color: rgba(0, 0, 0, 0.5);
font-weight: 500px;
font-size: 14px;
color: #FFFFFF;
line-height: 22px;
}
}
.photoL {
margin-right: 10px;
}
ul {
width: 380px;
height: 186px;
>li {
height: 22px;
padding-top: 16px;
>strong {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
background-color: #cecece;
padding-left: 6px;
box-sizing: border-box;
font-family: Source Han Sans, Source Han Sans;
font-weight: 500;
font-size: 18px;
color: #FFFFFF;
font-style: normal;
text-transform: none;
}
>em {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 10px;
border: 2px solid #8CBA86;
}
>span {
width: 380px;
height: 22px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 18px;
color: #333333;
line-height: 21px;
text-align: left;
font-style: normal;
text-transform: none;
padding-left: 9px;
}
>span:hover {
color: #139609;
}
}
}
}
}
}
//打假维权 动态
.dynamic {
height: 610px;
.inner {
height: 610px;
}
.innerLeft {
.protectRights {
float: left;
margin-top: 26px;
// 右侧的图片
.photoList {
float: left;
width: 387px;
margin-right: 40px;
>.top {
width: 387px;
height: 320px;
position: relative;
img {
width: 387px;
height: 320px;
}
span {
position: absolute;
bottom: 0;
left: 0;
display: inline-block;
width: 387px;
height: 68px;
padding: 33px 33px 8px 13px;
box-sizing: border-box;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 18px;
color: #FFFFFF;
line-height: 21px;
}
}
>.bottom {
width: 387px;
height: 202px;
margin-top: 15px;
>li {
width: 185px;
height: 139px;
float: left;
margin-right: 17px;
img {
width: 185px;
height: 139px;
}
p {
width: 175px;
height: 63px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 18px;
color: #333333;
line-height: 30px;
text-align: left;
font-style: normal;
text-transform: none;
}
}
>li:nth-child(2) {
margin-right: 0;
}
}
}
// 右侧的文字
.textList {
float: left;
width: 296px;
height: 545px;
>li {
width: 296px;
height: 75px;
margin-bottom: 19px;
>h4 {
width: 282px;
height: 25px;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 18px;
color: #333333;
line-height: 21px;
text-align: left;
font-style: normal;
text-transform: none;
// padding-left: 14px;
em {
display: inline-block;
width: 8px;
height: 8px;
margin-right: 6px;
border-radius: 4px;
background-color: #333333;
}
}
>P {
padding-left: 14px;
width: 249px;
height: 48px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: #666666;
line-height: 24px;
text-align: left;
font-style: normal;
text-transform: none;
}
}
>li:hover>h4,
>li:hover>p {
color: #139602;
}
>li:hover>h4>em {
background-color: #139602;
}
}
}
}
.innerRight {
.dynamicList {
width: 380px;
margin-top: 26px;
>li {
width: 380px;
height: 120px;
margin-bottom: 21px;
img {
float: left;
width: 160px;
height: 120px;
}
.text {
float: left;
width: 220px;
height: 120px;
padding-left: 15px;
box-sizing: border-box;
>h5 {
width: 199px;
height: 43px;
padding-top: 6px;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 18px;
color: #333333;
line-height: 26px;
text-align: left;
font-style: normal;
text-transform: none;
}
>p {
width: 198px;
height: 46px;
margin-top: 16px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: #666666;
line-height: 24px;
text-align: left;
font-style: normal;
text-transform: none;
}
}
.text:hover {
box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
}
}
}
}
// 政策法规
.policy {
height: 678px;
.inner {
height: 678px;
.innerLeft {
width: 790px;
height: 621px;
.policyList {
width: 790px;
margin-top: 20px;
>li {
width: 790px;
height: 121px;
margin-bottom: 20px;
>img,
>.text {
float: left;
}
>img {
width: 224px;
height: 121px;
}
.text {
width: 566px;
height: 121px;
padding-left: 20px;
box-sizing: border-box;
>h5 {
padding: 13px 0 6px;
width: 435px;
height: 25px;
font-family: PingFang SC, PingFang SC;
font-weight: 600;
font-size: 18px;
color: #333333;
line-height: 21px;
text-align: left;
font-style: normal;
text-transform: none;
}
>p {
width: 536px;
height: 48px;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
font-size: 14px;
color: #666666;
line-height: 24px;
text-align: left;
font-style: normal;
text-transform: none;
}
}
.text:hover {
box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.1);
background-color: #fff;
}
}
}
}
.innerRight {
// 轮播图
.banner {
width: 380px;
height: 214px;
margin-top: 20px;
}
.banner_b_img {
// 图片部分
.photo {
height: 104px;
margin-top: 23px;
}
.photoL,
.photoR {
float: left;
width: 185px;
height: 104px;
position: relative;
img {
width: 185px;
height: 104px;
}
span {
position: absolute;
top: 0;
left: 0;
display: inline-block;
padding-left: 7px;
box-sizing: border-box;
width: 185px;
height: 22px;
background-color: rgba(0, 0, 0, 0.5);
font-weight: 500px;
font-size: 14px;
color: #FFFFFF;
line-height: 22px;
}
}
.photoL {
margin-right: 10px;
}
ul {
width: 380px;
height: 186px;
>li {
height: 22px;
padding-top: 16px;
>strong {
display: inline-block;
width: 24px;
height: 24px;
line-height: 24px;
background-color: #cecece;
padding-left: 6px;
box-sizing: border-box;
font-family: Source Han Sans, Source Han Sans;
font-weight: 500;
font-size: 18px;
color: #FFFFFF;
font-style: normal;
text-transform: none;
}
>em {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 10px;
border: 2px solid #8CBA86;
}
>span {
width: 380px;
height: 22px;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
font-size: 18px;
color: #333333;
line-height: 21px;
text-align: left;
font-style: normal;
text-transform: none;
padding-left: 9px;
}
>span:hover {
color: #139609;
}
}
}
}
}
}
}
</style>