@@ -106,6 +106,14 @@ const whiteList = [ | |||||
//宅基地 | //宅基地 | ||||
'/zjdLogin', | '/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) => { | router.beforeEach((to, from, next) => { | ||||
@@ -132,8 +140,7 @@ router.beforeEach((to, from, next) => { | |||||
store.dispatch('LogOut').then(() => { | store.dispatch('LogOut').then(() => { | ||||
try { | try { | ||||
let loginUrl = Cookies.get("_Login_url"); | let loginUrl = Cookies.get("_Login_url"); | ||||
if(loginUrl && loginUrl.indexOf("onlineHomeLogin") !== -1) | |||||
{ | |||||
if (loginUrl && loginUrl.indexOf("onlineHomeLogin") !== -1) { | |||||
next({ path: '/onlineHomeLogin' }) | next({ path: '/onlineHomeLogin' }) | ||||
return; | return; | ||||
} | } | ||||
@@ -154,7 +161,7 @@ router.beforeEach((to, from, next) => { | |||||
next(`//lawEnforcement/login`) | next(`//lawEnforcement/login`) | ||||
} else if (to.path.indexOf('/sunVillage') !== -1) { | } else if (to.path.indexOf('/sunVillage') !== -1) { | ||||
next(`/sunVillage/login`) | next(`/sunVillage/login`) | ||||
}else if (to.path.indexOf('/homestead/') !== -1) { | |||||
} else if (to.path.indexOf('/homestead/') !== -1) { | |||||
next(`/homestead/login`) | next(`/homestead/login`) | ||||
} else { | } else { | ||||
next(`/yinnongLogin`) | next(`/yinnongLogin`) | ||||
@@ -175,8 +182,7 @@ router.beforeEach((to, from, next) => { | |||||
} else { | } else { | ||||
try { | try { | ||||
let loginUrl = Cookies.get("_Login_url"); | let loginUrl = Cookies.get("_Login_url"); | ||||
if(loginUrl && loginUrl.indexOf("onlineHomeLogin") !== -1) | |||||
{ | |||||
if (loginUrl && loginUrl.indexOf("onlineHomeLogin") !== -1) { | |||||
next({ path: `/onlineHomeLogin?redirect=${to.fullPath}` }) | next({ path: `/onlineHomeLogin?redirect=${to.fullPath}` }) | ||||
return; | return; | ||||
} | } | ||||
@@ -2827,6 +2827,60 @@ export const constantRoutes = [ | |||||
}, | }, | ||||
component: (resolve) => require(['@/views/onlineHome/homestead/supervision/supervisionDetail'], resolve) | 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> |