@@ -106,6 +106,14 @@ const whiteList = [ | |||
//宅基地 | |||
'/zjdLogin', | |||
//阳光村务--新 | |||
'/sunVillage_info/login', //登录 | |||
'/sunVillage_info/index', //首页 | |||
'/sunVillage_info/list_tourists', //二页列表-游客 | |||
'/sunVillage_info/fixedAssets', //固定资产 | |||
'/sunVillage_info/information', //合同信息 | |||
'/sunVillage_info/details' //详情页 | |||
] | |||
router.beforeEach((to, from, next) => { | |||
@@ -132,8 +140,7 @@ router.beforeEach((to, from, next) => { | |||
store.dispatch('LogOut').then(() => { | |||
try { | |||
let loginUrl = Cookies.get("_Login_url"); | |||
if(loginUrl && loginUrl.indexOf("onlineHomeLogin") !== -1) | |||
{ | |||
if (loginUrl && loginUrl.indexOf("onlineHomeLogin") !== -1) { | |||
next({ path: '/onlineHomeLogin' }) | |||
return; | |||
} | |||
@@ -154,7 +161,7 @@ router.beforeEach((to, from, next) => { | |||
next(`//lawEnforcement/login`) | |||
} else if (to.path.indexOf('/sunVillage') !== -1) { | |||
next(`/sunVillage/login`) | |||
}else if (to.path.indexOf('/homestead/') !== -1) { | |||
} else if (to.path.indexOf('/homestead/') !== -1) { | |||
next(`/homestead/login`) | |||
} else { | |||
next(`/yinnongLogin`) | |||
@@ -175,8 +182,7 @@ router.beforeEach((to, from, next) => { | |||
} else { | |||
try { | |||
let loginUrl = Cookies.get("_Login_url"); | |||
if(loginUrl && loginUrl.indexOf("onlineHomeLogin") !== -1) | |||
{ | |||
if (loginUrl && loginUrl.indexOf("onlineHomeLogin") !== -1) { | |||
next({ path: `/onlineHomeLogin?redirect=${to.fullPath}` }) | |||
return; | |||
} | |||
@@ -2827,6 +2827,60 @@ export const constantRoutes = [ | |||
}, | |||
component: (resolve) => require(['@/views/onlineHome/homestead/supervision/supervisionDetail'], resolve) | |||
}, | |||
{ //阳光村务(新)--登录页 | |||
path: '/sunVillage_info/login', | |||
name: 'sunVillageInfoLogin', | |||
meta: { | |||
title: '报账员登录', | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/sunVillage_info/login'], resolve) | |||
}, | |||
{ ////阳光村务(新)--主页 | |||
path: '/sunVillage_info/index', | |||
name: 'sunVillageInfoIndex', | |||
meta: { | |||
title: '报账员登录', | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/sunVillage_info/index'], resolve) | |||
}, | |||
{ ////阳光村务(新)-- 二页-游客 | |||
path: '/sunVillage_info/list_tourists', | |||
name: 'sunVillageInfoListTourists', | |||
meta: { | |||
title: '月度零工公示', | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/sunVillage_info/list_tourists'], resolve) | |||
}, | |||
{ ////阳光村务(新)-- 固定资产 | |||
path: '/sunVillage_info/fixedAssets', | |||
name: 'sunVillageInfoFixedAssets', | |||
meta: { | |||
title: '固定资产', | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/sunVillage_info/fixedAssets'], resolve) | |||
}, | |||
{ ////阳光村务(新)-- 合同信息 | |||
path: '/sunVillage_info/information', | |||
name: 'sunVillageInfoInformation', | |||
meta: { | |||
title: '合同信息', | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/sunVillage_info/information'], resolve) | |||
}, | |||
{ ////阳光村务(新)-- 合同信息 | |||
path: '/sunVillage_info/details', | |||
name: 'sunVillageInfoDetails', | |||
meta: { | |||
title: '详情页', | |||
hidden: true, | |||
}, | |||
component: (resolve) => require(['@/views/sunVillage_info/details'], resolve) | |||
} | |||
]; | |||
@@ -0,0 +1,97 @@ | |||
<template> | |||
<div class="home_wrapper"> | |||
<div class="header_main"> | |||
李家村4月零工公示 | |||
<div class="return_btn"></div> | |||
<div class="add_btn"></div> | |||
</div> | |||
<div class="release_head"> | |||
<div class="people"><i class="icon"></i>发布人:李铁根</div> | |||
<div class="time"><i class="icon"></i>发布日期:2022-10-12</div> | |||
</div> | |||
<div class="release_conetnt"> | |||
<img src="../../assets/images/sunVillage_info/img_1.png" /> | |||
<img src="../../assets/images/sunVillage_info/img_1.png" /> | |||
<p>本月公示已上传,有异议请致电 81451296 ,联系人王书记。</p> | |||
</div> | |||
</div> | |||
</template> | |||
<style scoped lang="scss"> | |||
.home_wrapper{ | |||
background: #e9e9e9; | |||
min-height: 100vh; | |||
width: 100vw; | |||
.header_main { | |||
height: 116px; | |||
background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat; | |||
background-size: 100% 100%; | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
font-size: 36px; | |||
line-height: 116px; | |||
text-align: center; | |||
color: #fff; | |||
position: relative; | |||
.return_btn { | |||
width: 24px; | |||
height: 43.2px; | |||
background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat; | |||
background-size: 20px 36px; | |||
position: absolute; | |||
left: 38px; | |||
top: 36px; | |||
} | |||
} | |||
.release_head{ | |||
height: 90px; | |||
padding:0 23px; | |||
display: flex; | |||
align-items: center; | |||
font-size: 26px; | |||
color: #929292; | |||
.people{ | |||
flex: 1; | |||
display: flex; | |||
align-items: center; | |||
.icon{ | |||
width: 24px; | |||
height: 21px; | |||
background: url('../../assets/images/sunVillage_info/details_icon_1.png') no-repeat; | |||
background-size: 100% 100%; | |||
display: block; | |||
margin-right: 8px; | |||
} | |||
} | |||
.time{ | |||
flex: 1; | |||
display: flex; | |||
align-items: center; | |||
justify-content:flex-end; | |||
.icon{ | |||
width: 25px; | |||
height: 25px; | |||
background: url('../../assets/images/sunVillage_info/details_icon_2.png') no-repeat; | |||
background-size: 100% 100%; | |||
display: block; | |||
margin-right: 8px; | |||
} | |||
} | |||
} | |||
.release_conetnt{ | |||
padding:0 22px; | |||
font-size: 32px; | |||
color: #252525; | |||
line-height: 44px; | |||
img{ | |||
max-width: 100%; | |||
margin-bottom: 16px; | |||
} | |||
p{ | |||
margin-bottom: 16px; | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,287 @@ | |||
<template> | |||
<div class="home_wrapper"> | |||
<div class="header_main"> | |||
固定资产 | |||
<div class="return_btn"></div> | |||
<div class="add_btn"></div> | |||
</div> | |||
<div class="search_info"> | |||
<div class="search_block"> | |||
<i class="icon"></i> | |||
<input type="text" class="ipt" placeholder="搜索"> | |||
</div> | |||
<div class="total">共4个资产</div> | |||
</div> | |||
<div class="list_main"> | |||
<!--1--> | |||
<div class="item"> | |||
<div class="head_block"> | |||
<i class="icon"></i> | |||
<div class="title">办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌</div> | |||
<div class="describe">自用</div> | |||
</div> | |||
<div class="order_block"> | |||
<div class="order">94400221765431088261</div> | |||
<div class="describe">房屋及建筑物</div> | |||
</div> | |||
<div class="function_block"> | |||
<div class="time"> | |||
<i class="icon"></i> | |||
2022-05-21 | |||
</div> | |||
<div class="state sell">出售</div> | |||
<div class="value">原值<span class="amount">¥199.00</span></div> | |||
</div> | |||
</div> | |||
<!--1--> | |||
<div class="item"> | |||
<div class="head_block"> | |||
<i class="icon"></i> | |||
<div class="title">办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌</div> | |||
<div class="describe">出租或出售</div> | |||
</div> | |||
<div class="order_block"> | |||
<div class="order">94400221765431088261</div> | |||
<div class="describe">加工设备工厂</div> | |||
</div> | |||
<div class="function_block"> | |||
<div class="time"> | |||
<i class="icon"></i> | |||
2022-05-21 | |||
</div> | |||
<div class="state scrap">报废</div> | |||
<div class="value">原值<span class="amount">¥199.00</span></div> | |||
</div> | |||
</div> | |||
<!--1--> | |||
<div class="item"> | |||
<div class="head_block"> | |||
<i class="icon"></i> | |||
<div class="title">办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌</div> | |||
<div class="describe">出租或出售</div> | |||
</div> | |||
<div class="order_block"> | |||
<div class="order">94400221765431088261</div> | |||
<div class="describe">加工设备工厂</div> | |||
</div> | |||
<div class="function_block"> | |||
<div class="time"> | |||
<i class="icon"></i> | |||
2022-05-21 | |||
</div> | |||
<div class="state normal">正常</div> | |||
<div class="value">原值<span class="amount">¥199.00</span></div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="bottom_tips"> | |||
<span class="xs">已经到底啦</span> | |||
</div> | |||
</div> | |||
</template> | |||
<style scoped lang="scss"> | |||
.home_wrapper{ | |||
background: #e9e9e9; | |||
min-height: 100vh; | |||
width: 100vw; | |||
.header_main { | |||
height: 116px; | |||
background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat; | |||
background-size: 100% 100%; | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
font-size: 36px; | |||
line-height: 116px; | |||
text-align: center; | |||
color: #fff; | |||
position: relative; | |||
.return_btn { | |||
width: 24px; | |||
height: 43.2px; | |||
background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat; | |||
background-size: 20px 36px; | |||
position: absolute; | |||
left: 38px; | |||
top: 36px; | |||
} | |||
.add_btn { | |||
width: 56.4px; | |||
height: 40.8px; | |||
background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat; | |||
background-size: 47px 34px; | |||
position: absolute; | |||
right: 38px; | |||
top: 36px; | |||
} | |||
} | |||
.search_info{ | |||
padding:20px 23px; | |||
display: flex; | |||
.search_block{ | |||
height: 59px; | |||
width: 535px; | |||
border-radius: 59px; | |||
background: #fff; | |||
display: flex; | |||
border:2px solid #3494ff; | |||
padding-right: 35px; | |||
align-items: center; | |||
.icon{ | |||
width: 30px; | |||
height: 30px; | |||
background: url('../../assets/images/sunVillage_info/fixedAssets_icon_1.png') no-repeat; | |||
background-size: 100% 100%; | |||
display: block; | |||
margin:0 8px 0 26px; | |||
} | |||
.ipt{ | |||
flex: 1; | |||
font-size: 26px; | |||
background: none; | |||
border:0 none; | |||
line-height: 59px; | |||
} | |||
} | |||
.total{ | |||
flex: 1; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
font-size: 26px; | |||
color: #858585; | |||
} | |||
} | |||
.list_main{ | |||
padding:0 22px; | |||
.item{ | |||
height: 198px; | |||
border-radius: 30px; | |||
background: #fff; | |||
box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1); | |||
padding:25px 32px; | |||
margin-bottom: 20px; | |||
.head_block{ | |||
height: 56px; | |||
display: flex; | |||
align-items: center; | |||
width: 100%; | |||
.icon{ | |||
width: 34px; | |||
height: 30px; | |||
background: url('../../assets/images/sunVillage_info/fixedAssets_icon_2.png') no-repeat; | |||
background-size: 100% 100%; | |||
display: block; | |||
margin-right: 12px; | |||
} | |||
.title{ | |||
flex:1; | |||
font-size: 32px; | |||
color: #252525; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
padding-right: 20px; | |||
} | |||
.describe{ | |||
height: 34px; | |||
padding: 0 15px; | |||
font-size: 24px; | |||
color: #3494ff; | |||
background: #e6f2ff; | |||
border-radius: 8px; | |||
} | |||
} | |||
.order_block{ | |||
height: 50px; | |||
display: flex; | |||
align-items: center; | |||
width: 100%; | |||
.order{ | |||
flex: 1; | |||
font-size: 26px; | |||
color: #252525; | |||
} | |||
.describe{ | |||
font-size: 26px; | |||
color: #3494ff; | |||
} | |||
} | |||
.function_block{ | |||
height: 46px; | |||
display: flex; | |||
align-items: center; | |||
.time{ | |||
display: flex; | |||
flex: 1; | |||
align-items: center; | |||
font-size: 24px; | |||
color: #858585; | |||
.icon{ | |||
width: 25px; | |||
height: 25px; | |||
background: url('../../assets/images/sunVillage_info/fixedAssets_icon_3.png') no-repeat; | |||
background-size: 100% 100%; | |||
display: block; | |||
margin-right: 8px; | |||
} | |||
} | |||
.state{ | |||
flex: 1; | |||
display: flex; | |||
justify-content: center; | |||
align-items: center; | |||
&.sell{ | |||
color: #f69600; | |||
} | |||
&.scrap{ | |||
color: #858585; | |||
} | |||
&.normal{ | |||
color: #68c000; | |||
} | |||
} | |||
.value{ | |||
flex:1; | |||
display: flex; | |||
align-items: center; | |||
justify-content:flex-end; | |||
font-size: 24px; | |||
color: #858585; | |||
.amount{ | |||
color: #eb1616; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.bottom_tips{ | |||
font-size: 24px; | |||
color: #a7a6a6; | |||
text-align: center; | |||
margin-top: 32px; | |||
background: url('../../assets/images/sunVillage_info/list_icon_8.png') center center no-repeat; | |||
background-size: 260px 2px; | |||
.xs{ | |||
padding:0 8px; | |||
background: #e9e9e9; | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,146 @@ | |||
<template> | |||
<div class="home_wrapper"> | |||
<div class="head_main"> | |||
<div class="location"> | |||
<div class="address"><i class="icon"></i>李家村</div> | |||
<div class="address">李家村李家合作社</div> | |||
</div> | |||
<div class="exit_btn"> | |||
<i class="icon"></i> | |||
</div> | |||
</div> | |||
<div class="index_info"> | |||
<div class="title"></div> | |||
<div class="nav_list"> | |||
<div class="nav_item n_1">财务公开榜</div> | |||
<div class="nav_item n_2">零工公开榜</div> | |||
<div class="nav_item n_3">重大事项</div> | |||
<div class="nav_item n_4">固定资产</div> | |||
<div class="nav_item n_5">合同登记</div> | |||
</div> | |||
</div> | |||
<div class="footer"> | |||
技术支持:北京农燊高科信息技术有限公司 | |||
</div> | |||
</div> | |||
</template> | |||
<style scoped lang="scss"> | |||
.home_wrapper{ | |||
background: #f1f2f2; | |||
width: 100vw; | |||
min-height: 100vh; | |||
.head_main{ | |||
height: 340px; | |||
background: url('../../assets/images/sunVillage_info/index_head.png') no-repeat; | |||
background-size: 100% 100%; | |||
position: relative; | |||
.location{ | |||
height: 42px; | |||
line-height: 42px; | |||
position: absolute; | |||
left: 38px; | |||
top: 72px; | |||
display: flex; | |||
.address{ | |||
padding:0 18px; | |||
background:rgba(255,255,255,0.75); | |||
border-radius: 42px; | |||
font-size: 28px; | |||
color: #3f3d56; | |||
margin-right: 12px; | |||
display: flex; | |||
align-items:center; | |||
.icon{ | |||
display: block; | |||
width: 20px; | |||
height: 26px; | |||
background: url('../../assets/images/sunVillage_info/index_icon_1.png') no-repeat; | |||
background-size: 100% 100%; | |||
margin-right: 10px; | |||
} | |||
} | |||
} | |||
.exit_btn{ | |||
width: 61px; | |||
height: 61px; | |||
background: #3f3d56; | |||
border-radius: 50%; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
position: absolute; | |||
top: 64px; | |||
right: 36px; | |||
.icon{ | |||
width: 35px; | |||
height: 33px; | |||
background: url('../../assets/images/sunVillage_info/index_icon_2.png') no-repeat; | |||
background-size: 100% 100%; | |||
} | |||
} | |||
} | |||
.index_info{ | |||
padding-top: 4.1vh; | |||
.title{ | |||
width: 521px; | |||
height: 52px; | |||
background: url('../../assets/images/sunVillage_info/index_title.png') no-repeat; | |||
background-size: 100% 100%; | |||
margin:0 auto; | |||
} | |||
.nav_list{ | |||
margin-top: 6vh; | |||
padding:0 38px; | |||
display: flex; | |||
flex-flow: wrap; | |||
.nav_item{ | |||
flex:0 0 200px; | |||
height: 249px; | |||
margin-right: 34px; | |||
margin-bottom: 35px; | |||
box-shadow: 6px 0px 18px rgba(63,68,75,0.2); | |||
border-radius: 30px; | |||
font-size: 30px; | |||
color: #fff; | |||
text-align: center; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
padding-top: 120px; | |||
&:nth-child(3){ | |||
margin-right: 0; | |||
} | |||
&.n_1{ | |||
background: url('../../assets/images/sunVillage_info/index_block_1.png') no-repeat; | |||
background-size: 100% 100%; | |||
} | |||
&.n_2{ | |||
background: url('../../assets/images/sunVillage_info/index_block_2.png') no-repeat; | |||
background-size: 100% 100%; | |||
} | |||
&.n_3 { | |||
background: url('../../assets/images/sunVillage_info/index_block_3.png') no-repeat; | |||
background-size: 100% 100%; | |||
} | |||
&.n_4 { | |||
background: url('../../assets/images/sunVillage_info/index_block_4.png') no-repeat; | |||
background-size: 100% 100%; | |||
} | |||
&.n_5 { | |||
background: url('../../assets/images/sunVillage_info/index_block_5.png') no-repeat; | |||
background-size: 100% 100%; | |||
} | |||
} | |||
} | |||
} | |||
.footer{ | |||
position: absolute; | |||
bottom: 5.5vh; | |||
width: 100%; | |||
font-size: 22px; | |||
color: #3f3d56; | |||
text-align: center; | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,302 @@ | |||
<template> | |||
<div class="home_wrapper"> | |||
<div class="header_main"> | |||
合同信息 | |||
<div class="return_btn"></div> | |||
<div class="add_btn"></div> | |||
</div> | |||
<div class="search_info"> | |||
<div class="search_block"> | |||
<i class="icon"></i> | |||
<input type="text" class="ipt" placeholder="搜索"> | |||
</div> | |||
<div class="total">共4个合同</div> | |||
</div> | |||
<div class="list_main"> | |||
<!--1--> | |||
<div class="item"> | |||
<div class="head_block"> | |||
<i class="icon"></i> | |||
<div class="title">办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌</div> | |||
</div> | |||
<div class="order_block"> | |||
<div class="order">0000000001</div> | |||
<div class="describe suspend">中止<i class="icon"></i></div> | |||
</div> | |||
<div class="function_block"> | |||
<div class="value">合同金额<span class="amount">¥199.00</span></div> | |||
<div class="startStop_time"> | |||
<div class="time"><div class="unim start">起</div>2022.05.04</div> | |||
<div class="time"><div class="unim stop">始</div>2022.05.04</div> | |||
</div> | |||
</div> | |||
</div> | |||
<!--1--> | |||
<div class="item"> | |||
<div class="head_block"> | |||
<i class="icon"></i> | |||
<div class="title">办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌</div> | |||
</div> | |||
<div class="order_block"> | |||
<div class="order">0000000001</div> | |||
<div class="describe normal">正常<i class="icon"></i></div> | |||
</div> | |||
<div class="function_block"> | |||
<div class="value">合同金额<span class="amount">¥199.00</span></div> | |||
<div class="startStop_time"> | |||
<div class="time"><div class="unim start">起</div>2022.05.04</div> | |||
<div class="time"><div class="unim stop">始</div>2022.05.04</div> | |||
</div> | |||
</div> | |||
</div> | |||
<!--1--> | |||
<div class="item"> | |||
<div class="head_block"> | |||
<i class="icon"></i> | |||
<div class="title">办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌办公桌</div> | |||
</div> | |||
<div class="order_block"> | |||
<div class="order">0000000001</div> | |||
<div class="describe undo">正常<i class="icon"></i></div> | |||
</div> | |||
<div class="function_block"> | |||
<div class="value">合同金额<span class="amount">¥199.00</span></div> | |||
<div class="startStop_time"> | |||
<div class="time"><div class="unim start">起</div>2022.05.04</div> | |||
<div class="time"><div class="unim stop">始</div>2022.05.04</div> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="bottom_tips"> | |||
<span class="xs">已经到底啦</span> | |||
</div> | |||
</div> | |||
</template> | |||
<style scoped lang="scss"> | |||
.home_wrapper{ | |||
background: #e9e9e9; | |||
min-height: 100vh; | |||
width: 100vw; | |||
.header_main { | |||
height: 116px; | |||
background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat; | |||
background-size: 100% 100%; | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
font-size: 36px; | |||
line-height: 116px; | |||
text-align: center; | |||
color: #fff; | |||
position: relative; | |||
.return_btn { | |||
width: 24px; | |||
height: 43.2px; | |||
background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat; | |||
background-size: 20px 36px; | |||
position: absolute; | |||
left: 38px; | |||
top: 36px; | |||
} | |||
.add_btn { | |||
width: 56.4px; | |||
height: 40.8px; | |||
background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat; | |||
background-size: 47px 34px; | |||
position: absolute; | |||
right: 38px; | |||
top: 36px; | |||
} | |||
} | |||
.search_info{ | |||
padding:20px 23px; | |||
display: flex; | |||
.search_block{ | |||
height: 59px; | |||
width: 535px; | |||
border-radius: 59px; | |||
background: #fff; | |||
display: flex; | |||
border:2px solid #3494ff; | |||
padding-right: 35px; | |||
align-items: center; | |||
.icon{ | |||
width: 30px; | |||
height: 30px; | |||
background: url('../../assets/images/sunVillage_info/fixedAssets_icon_1.png') no-repeat; | |||
background-size: 100% 100%; | |||
display: block; | |||
margin:0 8px 0 26px; | |||
} | |||
.ipt{ | |||
flex: 1; | |||
font-size: 26px; | |||
background: none; | |||
border:0 none; | |||
line-height: 59px; | |||
} | |||
} | |||
.total{ | |||
flex: 1; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
font-size: 26px; | |||
color: #858585; | |||
} | |||
} | |||
.list_main{ | |||
padding:0 22px; | |||
.item{ | |||
height: 207px; | |||
border-radius: 30px; | |||
background: #fff; | |||
box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1); | |||
padding:25px 32px; | |||
margin-bottom: 20px; | |||
.head_block{ | |||
height: 56px; | |||
display: flex; | |||
align-items: center; | |||
width: 100%; | |||
.icon{ | |||
width: 34px; | |||
height: 30px; | |||
background: url('../../assets/images/sunVillage_info/fixedAssets_icon_2.png') no-repeat; | |||
background-size: 100% 100%; | |||
display: block; | |||
margin-right: 12px; | |||
} | |||
.title{ | |||
flex:1; | |||
font-size: 32px; | |||
color: #252525; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
padding-right: 20px; | |||
} | |||
} | |||
.order_block{ | |||
height: 50px; | |||
display: flex; | |||
align-items: center; | |||
width: 100%; | |||
.order{ | |||
flex: 1; | |||
font-size: 26px; | |||
color: #252525; | |||
} | |||
.describe{ | |||
font-size: 26px; | |||
display: flex; | |||
align-items: center; | |||
&.suspend{ | |||
color: #f69600; | |||
.icon{ | |||
width: 27px; | |||
height: 26px; | |||
background: url('../../assets/images/sunVillage_info/information_icon_1.png') no-repeat; | |||
background-size: 100% 100%; | |||
display: block; | |||
margin-left: 15px; | |||
} | |||
} | |||
&.normal{ | |||
color: #69c100; | |||
.icon{ | |||
width: 32px; | |||
height: 26px; | |||
background: url('../../assets/images/sunVillage_info/information_icon_2.png') no-repeat; | |||
background-size: 100% 100%; | |||
display: block; | |||
margin-left: 15px; | |||
} | |||
} | |||
&.undo{ | |||
color: #858585; | |||
.icon{ | |||
width: 27px; | |||
height: 26px; | |||
background: url('../../assets/images/sunVillage_info/information_icon_3.png') no-repeat; | |||
background-size: 100% 100%; | |||
display: block; | |||
margin-left: 15px; | |||
} | |||
} | |||
} | |||
} | |||
.function_block{ | |||
height: 50px; | |||
display: flex; | |||
align-items: center; | |||
width: 100%; | |||
.value{ | |||
flex: 1; | |||
font-size: 24px; | |||
color: #252525; | |||
.amount{ | |||
color: #eb1616; | |||
} | |||
} | |||
.startStop_time{ | |||
display: flex; | |||
align-items: center; | |||
.time{ | |||
display: flex; | |||
align-items: center; | |||
font-size: 24px; | |||
color: #002022; | |||
margin-left: 25px; | |||
.unim{ | |||
width: 32px; | |||
height: 32px; | |||
font-size: 22px; | |||
color: #fff; | |||
text-align: center; | |||
line-height: 32px; | |||
border-radius: 6px; | |||
margin-right: 8px; | |||
&.start{background: #3e7df2;} | |||
&.stop{background: #eb1616;} | |||
} | |||
} | |||
} | |||
} | |||
// <div class="function_block"> | |||
// <div class="value">合同金额<span class="amount">¥199.00</span></div> | |||
// <div class="startStop_time"> | |||
// <div class="time"><div class="unim">起</div>2022.05.04</div> | |||
// <div class="time"><div class="unim">起</div>2022.05.04</div> | |||
// </div> | |||
// </div> | |||
} | |||
} | |||
.bottom_tips{ | |||
font-size: 24px; | |||
color: #a7a6a6; | |||
text-align: center; | |||
margin-top: 32px; | |||
background: url('../../assets/images/sunVillage_info/list_icon_8.png') center center no-repeat; | |||
background-size: 260px 2px; | |||
.xs{ | |||
padding:0 8px; | |||
background: #e9e9e9; | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,290 @@ | |||
<template> | |||
<div class="home_wrapper"> | |||
<div class="header_main"> | |||
月度零工公示 | |||
<div class="return_btn"></div> | |||
<div class="add_btn"></div> | |||
</div> | |||
<div class="record_main"> | |||
<div class="record_det"> | |||
<div class="year_l"><i class="icon ss"></i>2022<span class="unit">年</span></div> | |||
<div class="total_r">共4条公告</div> | |||
</div> | |||
<div class="record_list"> | |||
<div class="flex_block ">全部</div> | |||
<div class="flex_block current">2022</div> | |||
<div class="flex_block">2021</div> | |||
<div class="flex_block">2020</div> | |||
</div> | |||
</div> | |||
<div class="list_main"> | |||
<!----1--> | |||
<div class="item"> | |||
<div class="info"> | |||
<div class="title"> | |||
<i class="icon_box"></i> | |||
<p class="news_title">李家村4月零工公示</p> | |||
<p class="tips_mark">新</p> | |||
</div> | |||
<div class="time"> | |||
<div class="icon_time"></div> | |||
2022-05-03 | |||
</div> | |||
</div> | |||
<div class="operation"> | |||
<!-- delete 删除 edit编辑 view查看 --> | |||
<div class="opera_btn edit"> | |||
<i class="icon "></i> | |||
</div> | |||
<div class="opera_btn delete"> | |||
<i class="icon"></i> | |||
</div> | |||
<!-- <div class="opera_btn view"> | |||
<i class="icon "></i> | |||
</div> --> | |||
</div> | |||
</div> | |||
<!----1--> | |||
<div class="item"> | |||
<div class="info"> | |||
<div class="title"> | |||
<i class="icon_box"></i> | |||
<p class="news_title">李家村4月零工公示</p> | |||
<p class="tips_mark">新</p> | |||
</div> | |||
<div class="time"> | |||
<div class="icon_time"></div> | |||
2022-05-03 | |||
</div> | |||
</div> | |||
<div class="operation"> | |||
<!-- delete 删除 edit编辑 view查看 --> | |||
<div class="opera_btn view"> | |||
<i class="icon "></i> | |||
</div> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="bottom_tips"> | |||
<span class="xs">已经到底啦</span> | |||
</div> | |||
</div> | |||
</template> | |||
<style scoped lang="scss"> | |||
.home_wrapper{ | |||
background: #e9e9e9; | |||
min-height: 100vh; | |||
width: 100vw; | |||
.header_main{ | |||
height: 116px; | |||
background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat; | |||
background-size: 100% 100%; | |||
position: fixed; | |||
top: 0; | |||
left: 0; | |||
width: 100%; | |||
font-size: 36px; | |||
line-height: 116px; | |||
text-align: center; | |||
color: #fff; | |||
position: relative; | |||
.return_btn{ | |||
width: 24px; | |||
height: 43.2px; | |||
background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat; | |||
background-size: 20px 36px; | |||
position: absolute; | |||
left: 38px; | |||
top: 36px; | |||
} | |||
.add_btn{ | |||
width: 56.4px; | |||
height: 40.8px; | |||
background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat; | |||
background-size: 47px 34px; | |||
position: absolute; | |||
right: 38px; | |||
top: 36px; | |||
} | |||
} | |||
.record_main{ | |||
padding:30px 22px; | |||
.record_det{ | |||
height: 38px; | |||
line-height: 38px; | |||
display: flex; | |||
justify-content:space-between; | |||
.year_l{ | |||
font-size: 30px; | |||
display: flex; | |||
align-items: center; | |||
color: #858585; | |||
.unit{ | |||
padding-left: 5px; | |||
} | |||
.icon{ | |||
width: 23px; | |||
height: 12px; | |||
display: block; | |||
background: url('../../assets/images/sunVillage_info/list_icon_1.png') no-repeat; | |||
background-size: 100% 100%; | |||
margin-bottom: 4px; | |||
margin-right: 8px; | |||
&.zk { | |||
transform: rotate(0deg) | |||
} | |||
&.ss{ | |||
transform: rotate(180deg) | |||
} | |||
} | |||
} | |||
.total_r{ | |||
font-size: 26px; | |||
letter-spacing: 2px; | |||
} | |||
} | |||
.record_list{ | |||
display: flex; | |||
flex-flow: wrap; | |||
margin-top: 12px; | |||
.flex_block{ | |||
font-size: 30px; | |||
color: #878787; | |||
padding-right: 30px; | |||
&.current{ | |||
color: #4199fe; | |||
font-weight: bold; | |||
} | |||
} | |||
} | |||
} | |||
.list_main{ | |||
padding:0 22px; | |||
.item{ | |||
height: 140px; | |||
border-radius: 30px; | |||
background: #fff; | |||
box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1); | |||
padding:25px 32px; | |||
display: flex; | |||
margin-bottom: 20px; | |||
.info{ | |||
flex:0 0 510px; | |||
.title{ | |||
display: flex; | |||
font-size: 32px; | |||
align-items: center; | |||
height: 58px; | |||
.icon_box{ | |||
width: 34px; | |||
display: block; | |||
height: 30px; | |||
background: url('../../assets/images/sunVillage_info/list_icon_2.png') no-repeat; | |||
background-size: 100% 100%; | |||
margin-right: 10px; | |||
} | |||
.news_title{ | |||
max-width:416px; | |||
overflow: hidden; | |||
white-space: nowrap; | |||
text-overflow: ellipsis; | |||
-o-text-overflow: ellipsis; | |||
} | |||
.tips_mark{ | |||
width: 34px; | |||
height: 34px; | |||
background: #fa0c0c; | |||
border-radius: 8px; | |||
font-size: 24px; | |||
color: #fff; | |||
text-align: center; | |||
line-height: 34px; | |||
margin-left: 10px; | |||
} | |||
} | |||
.time{ | |||
font-size: 24px; | |||
color: #858585; | |||
display: flex; | |||
align-items: center; | |||
height: 30px; | |||
margin-top: 6px; | |||
.icon_time{ | |||
width: 25px; | |||
height: 25px; | |||
background: url('../../assets/images/sunVillage_info/list_icon_4.png') no-repeat; | |||
background-size: 100% 100%; | |||
margin-right: 10px; | |||
} | |||
} | |||
} | |||
.operation{ | |||
flex: 1; | |||
display: flex; | |||
align-items: center; | |||
justify-content: flex-end; | |||
text-align: right; | |||
.opera_btn{ | |||
width: 52px; | |||
height: 52px; | |||
border-radius: 50%; | |||
display: flex; | |||
align-items: center; | |||
justify-content:center; | |||
&.delete{ | |||
background:#df0707; | |||
margin-left: 28px; | |||
.icon{ | |||
width: 22px; | |||
height: 29px; | |||
background: url('../../assets/images/sunVillage_info/list_icon_7.png') no-repeat; | |||
background-size: 100% 100%; | |||
display: block; | |||
} | |||
} | |||
&.edit{ | |||
background: #79cf13; | |||
.icon { | |||
width: 26px; | |||
height: 25px; | |||
background: url('../../assets/images/sunVillage_info/list_icon_6.png') no-repeat; | |||
background-size: 100% 100%; | |||
display: block; | |||
} | |||
} | |||
&.view{ | |||
background: #3494ff; | |||
.icon { | |||
width: 29px; | |||
height: 21px; | |||
background: url('../../assets/images/sunVillage_info/list_icon_3.png') no-repeat; | |||
background-size: 100% 100%; | |||
display: block; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.bottom_tips{ | |||
font-size: 24px; | |||
color: #a7a6a6; | |||
text-align: center; | |||
margin-top: 32px; | |||
background: url('../../assets/images/sunVillage_info/list_icon_8.png') center center no-repeat; | |||
background-size: 260px 2px; | |||
.xs{ | |||
padding:0 8px; | |||
background: #e9e9e9; | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,164 @@ | |||
<template> | |||
<div class="home_wrapper"> | |||
<div class="focus_head"> | |||
</div> | |||
<div class="focus_info"> | |||
<div class="icon"></div> | |||
<div class="title"></div> | |||
</div> | |||
<div class="login_from"> | |||
<div class="flex_block"> | |||
<div class="flex_input_main"> | |||
<div class="icon_wrap user"></div> | |||
<div class="input_wrap"> | |||
<input type="text" class="ipt" placeholder="用户名"/> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="flex_block"> | |||
<div class="flex_input_main"> | |||
<div class="icon_wrap password"></div> | |||
<div class="input_wrap"> | |||
<input type="text" class="ipt" maxlength="16" placeholder="密码"/> | |||
</div> | |||
<div class="showHidden ico_hide"></div> | |||
</div> | |||
</div> | |||
<div class="flex_block"> | |||
<div class="flex_input_main valid"> | |||
<div class="icon_wrap valid"></div> | |||
<div class="input_wrap"> | |||
<input type="text" class="ipt" maxlength="4" placeholder="请输入验证码"/> | |||
</div> | |||
</div> | |||
<div class="valid_main"> | |||
</div> | |||
</div> | |||
</div> | |||
<div class="login_btn"> | |||
<div class="btn">登录</div> | |||
</div> | |||
</div> | |||
</template> | |||
<style scoped lang="scss"> | |||
.home_wrapper{ | |||
background: #f1f2f2; | |||
width: 100vw; | |||
min-height: 100vh; | |||
.focus_head{ | |||
height: 450px; | |||
background: url('../../assets/images/sunVillage_info/login_head.png') no-repeat; | |||
background-size: 100% 100%; | |||
} | |||
.focus_info{ | |||
margin-top: -74px; | |||
.icon{ | |||
background: url('../../assets/images/sunVillage_info/login_head_t.png') no-repeat; | |||
background-size: 100% 100%; | |||
width: 145px; | |||
height: 148px; | |||
margin:0 auto; | |||
} | |||
.title{ | |||
width: 284px; | |||
height: 52px; | |||
background: url('../../assets/images/sunVillage_info/login_head_nr.png') no-repeat; | |||
background-size: 100% 100%; | |||
margin:30px auto 0; | |||
} | |||
} | |||
.login_from{ | |||
width: 676px; | |||
height: 408px; | |||
background: url('../../assets/images/sunVillage_info/login_main.png') no-repeat; | |||
background-size: 100% 100%; | |||
margin: 50px auto 0; | |||
padding:60px 50px 0; | |||
.flex_block{ | |||
margin-bottom: 40px; | |||
display: flex; | |||
justify-content:space-between; | |||
.flex_input_main{ | |||
position: relative; | |||
display: flex; | |||
flex: 1; | |||
align-items:center; | |||
background: rgba(255,255,255,0.7); | |||
border-radius: 62px; | |||
height: 62px; | |||
.icon_wrap{ | |||
width: 35px; | |||
height: 35px; | |||
&.user{ | |||
background: url('../../assets/images/sunVillage_info/login_icon_1.png') no-repeat; | |||
background-size: 100% 100%; | |||
margin-left: 30px; | |||
} | |||
&.password{ | |||
background: url('../../assets/images/sunVillage_info/login_icon_2.png') no-repeat; | |||
background-size: 100% 100%; | |||
margin-left: 30px; | |||
} | |||
&.valid{ | |||
background: url('../../assets/images/sunVillage_info/login_icon_3.png') no-repeat; | |||
background-size: 100% 100%; | |||
margin-left: 30px; | |||
} | |||
} | |||
.input_wrap{ | |||
flex: 1; | |||
margin-left: 16px; | |||
padding-right: 30px; | |||
.ipt{ | |||
width: 100%; | |||
height: 48px; | |||
background:transparent; | |||
font-size: 30px; | |||
color: #3f3d56; | |||
} | |||
} | |||
.showHidden{ | |||
width: 32px; | |||
height: 32px; | |||
background: url('../../assets/images/sunVillage_info/login_icon_4.png') no-repeat; | |||
background-size: 100% 100%; | |||
position: absolute; | |||
right: 38px; | |||
cursor: pointer; | |||
&.ico_hide{ | |||
background: url('../../assets/images/sunVillage_info/login_icon_5.png') no-repeat; | |||
background-size: 100% 100%; | |||
} | |||
} | |||
&.valid{ | |||
flex:0 0 380px; | |||
} | |||
} | |||
.valid_main{ | |||
width: 165px; | |||
height: 62px; | |||
background: #3f3d56; | |||
border-radius: 30px; | |||
img{width: 100%; height: 100%;} | |||
} | |||
} | |||
} | |||
.login_btn{ | |||
padding-top: 80px; | |||
.btn{ | |||
width: 315px; | |||
height: 70px; | |||
background:url('../../assets/images/sunVillage_info/login_btn.png') no-repeat; | |||
background-size: 100% 100%; | |||
margin:0 auto; | |||
font-size: 32px; | |||
color: #fff; | |||
line-height: 70px; | |||
text-align: center; | |||
} | |||
} | |||
} | |||
</style> |