williamet/jiace-web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

政策解读模块

Browse Source
This commit is contained in:
熊丽君
2021-08-04 08:39:11 +08:00
parent 3d0e882d1b
commit 591d2bef16
13 changed files with 352 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.vue
View File

@ -14,4 +14,18 @@ export default {
width: 1400px;
margin: 0 auto;
}
.p0-100 {
padding: 0 100px;
}
.text_hidden_one {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
// overflow: hidden;
// display: -webkit-box;
// -webkit-line-clamp: 1;
// -webkit-box-orient: vertical;
// word-break: break-all;
}
</style>

17
src/api/home/home.js Normal file
View File

@ -0,0 +1,17 @@
import request from '@/utils/request';
// 首页获取政策列表
export function getPolicy(params) {
return request({
url: '/mPolicy/getPolicy',
method: 'post',
params
});
}
// 首页获取政策解读列表
export function getPolicyRead(params) {
return request({
url: '/mPolicy/getPolicyRead',
params
});
}

BIN
src/assets/image/banner1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 205 KiB

BIN
src/assets/image/banner2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 193 KiB

BIN
src/assets/image/banner3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 284 KiB

BIN
src/assets/image/icon4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 407 B

BIN
src/assets/image/icon5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

BIN
src/assets/image/new.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 670 B

1
src/permission.js
View File

@ -39,7 +39,6 @@ router.beforeEach((to, from, next) => {
}
}
} else {
console.log('无');
next();
// if (whiteList.indexOf(to.path) !== -1) {
// next();

1
src/store/modules/user.js
View File

@ -73,7 +73,6 @@ const user = {
const avatar = !res.data.icon
? require('@/assets/image/profile.jpg')
: process.env.VUE_APP_BASE_API + user.icon;
console.log(avatar);
if (res.roles && res.roles.length > 0) {
// 验证返回的roles是否是一个非空数组
commit('SET_ROLES', res.roles);

37
src/utils/date.js
View File

@ -1,7 +1,10 @@
// date.js
export function formatDate(date, fmt) {
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
fmt = fmt.replace(
RegExp.$1,
(date.getFullYear() + '').substr(4 - RegExp.$1.length)
);
}
let o = {
'M+': date.getMonth() + 1,
@ -13,7 +16,10 @@ export function formatDate(date, fmt) {
for (let k in o) {
if (new RegExp(`(${k})`).test(fmt)) {
let str = o[k] + '';
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length === 1 ? str : padLeftZero(str)
);
}
}
return fmt;
@ -25,13 +31,13 @@ function padLeftZero(str) {
export function str2Date(dateStr, separator) {
if (!separator) {
separator = "-";
separator = '-';
}
let dateArr = dateStr.split(separator);
let year = parseInt(dateArr[0]);
let month;
//处理月份为04这样的情况
if (dateArr[1].indexOf("0") == 0) {
if (dateArr[1].indexOf('0') == 0) {
month = parseInt(dateArr[1].substring(1));
} else {
month = parseInt(dateArr[1]);
@ -40,3 +46,26 @@ export function str2Date(dateStr, separator) {
let date = new Date(year, month - 1, day);
return date;
}
export function formatTime(value, type) {
let date = new Date(value);
let year = date.getFullYear();
let month = date.getMonth() + 1;
month = month > 9 ? month : '0' + month;
let day = date.getDate();
day = day > 9 ? day : '0' + day;
let hh = date.getHours();
hh = hh > 9 ? hh : '0' + hh;
let mm = date.getMinutes();
mm = mm > 9 ? mm : '0' + mm;
let ss = date.getSeconds();
ss = ss > 9 ? ss : '0' + ss;
let time = '';
if (type === 1) {
//不带时分秒
time = year + '-' + month + '-' + day;
} else {
time = year + '-' + month + '-' + day + ' ' + hh + ':' + mm + ':' + ss;
}
return time;
}

284
src/views/home/home.vue
View File

@ -1,5 +1,287 @@
<template>
<div>
home
<div class="p0-100">
<div style="display:flex">
<div class="banner">
<!-- 轮播图 -->
<el-carousel height="345px" trigger="click">
<el-carousel-item v-for="(item, index) in bannerList" :key="index">
<img :src="item" alt="" />
</el-carousel-item>
</el-carousel>
<!-- 政策解读 -->
<div class="unscramble">
<div class="title">
<div class="title_top">
<div class="title_top_l">
<img src="@/assets/image/icon4.png" alt="" />
<img src="@/assets/image/icon5.png" alt="" />
</div>
<div class="title_top_r">
更多<i class="el-icon-arrow-right"></i>
</div>
</div>
<span>{{ date }}</span>
</div>
<div class="tab_list">
<el-tabs
v-model="queryParams2.attributeId"
@tab-click="handleClick2"
>
<el-tab-pane label="经信" name="JXJ"></el-tab-pane>
<el-tab-pane label="科技" name="KJJ"></el-tab-pane>
<el-tab-pane label="发改" name="FGW"></el-tab-pane>
<el-tab-pane label="其他" name="OTHER"></el-tab-pane>
<div
class="tab_item"
v-for="(item, index) in list2"
:key="item.id"
>
<span :class="index < 3 ? 'color' : ''">{{ index + 1 }}</span>
<span class="text_hidden_one">{{ item.title }}</span>
<i v-if="index < 3">
<img src="@/assets/image/new.png" alt="" />
</i>
</div>
</el-tabs>
</div>
</div>
</div>
<div class="banner_r">
<!-- 政策列表 -->
<el-tabs v-model="queryParams.labelId" @tab-click="handleClick">
<el-tab-pane label="政策法规" name="1415156808053559296">
<div class="banner_r_list" v-for="item in 5" :key="item">
<div>
政策法规合肥市推动经济高速发展的情况，合肥市就是垃圾了时间伏拉夫刚打色无法沙发上
</div>
<span>07-09</span>
</div>
</el-tab-pane>
<el-tab-pane label="申报通知" name="1415156963146338304">
<div class="banner_r_list" v-for="item in 5" :key="item">
<div>
申报通知合肥市推动经济高速发展的情况，合肥市就是垃圾了时间伏拉夫刚打色无法沙发上
</div>
<span>07-09</span>
</div>
</el-tab-pane>
<el-tab-pane label="政府公示" name="1415157002090450944">
<div class="banner_r_list" v-for="item in 5" :key="item">
<div>
政府公示合肥市推动经济高速发展的情况，合肥市就是垃圾了时间伏拉夫刚打色无法沙发上
</div>
<span>07-09</span>
</div>
</el-tab-pane>
<el-tab-pane label="公告" name="1415157026115424256">
<div class="banner_r_list" v-for="item in 5" :key="item">
<div>
公告公示合肥市推动经济高速发展的情况，合肥市就是垃圾了时间伏拉夫刚打色无法沙发上
</div>
<span>07-09</span>
</div>
</el-tab-pane>
<el-tab-pane label="其他" name="1415157049267982336">
<div class="banner_r_list" v-for="item in 5" :key="item">
<div>
其他公示合肥市推动经济高速发展的情况，合肥市就是垃圾了时间伏拉夫刚打色无法沙发上
</div>
<span>07-09</span>
</div>
</el-tab-pane>
</el-tabs>
<!-- 资讯快报 -->
<div>999</div>
</div>
</div>
</div>
</div>
</template>
<script>
import logoImg1 from '@/assets/image/banner1.png';
import logoImg2 from '@/assets/image/banner2.png';
import logoImg3 from '@/assets/image/banner3.png';
import { getPolicy, getPolicyRead } from '@/api/home/home';
import { formatTime } from '@/utils/date';
export default {
data() {
return {
bannerList: [logoImg1, logoImg2, logoImg3],
queryParams: {
labelId: '1415156808053559296'
},
queryParams2: {
attributeId: 'JXJ'
},
date: formatTime(Date.now(), 1),
list: [],
list2: []
};
},
methods: {
// 政策列表
handleClick(tab, event) {
getPolicy(this.queryParams).then(({ data }) => {
this.list = data.list;
});
},
// 政策解读
handleClick2(tab, event) {
getPolicyRead(this.queryParams2).then(({ data }) => {
this.list2 = data.list;
});
}
},
created() {
this.handleClick();
this.handleClick2();
}
};
</script>
<style lang="scss" scoped>
// /deep/.el-carousel__button {
// width: 8px;
// height: 8px;
// border-radius: 50%;
// }
// /deep/.is-active {
// .el-carousel__button {
// width: 20px;
// background-color: #ffa32c;
// border-radius: 4px;
// }
// }
/deep/.el-tabs__item {
padding: 0 30px;
font-size: 20px;
}
/deep/.el-tabs__item.is-active {
font-weight: bold;
color: #3394ff;
}
/deep/.el-tabs__active-bar {
height: 4px;
border-radius: 2px;
background-color: #3394ff;
}
/deep/.el-tabs__nav-wrap::after {
height: 0;
}
.banner {
width: 614px;
margin-right: 20px;
/deep/.el-carousel__button {
width: 8px;
height: 8px;
border-radius: 50%;
}
/deep/.is-active {
.el-carousel__button {
width: 20px;
background-color: #ffa32c;
border-radius: 4px;
}
}
.unscramble {
margin-top: 30px;
.title {
position: relative;
padding-right: 21px;
height: 40px;
line-height: 40px;
text-align: right;
background-color: #f3f3f3;
border-radius: 6px 6px 0px 0px;
.title_top {
position: absolute;
display: flex;
justify-content: space-between;
align-items: center;
bottom: 0;
padding: 0 20px;
width: 400px;
height: 50px;
background: #3394ff;
border-radius: 6px 6px 0px 0px;
.title_top_l {
img {
vertical-align: middle;
margin-right: 10px;
}
}
.title_top_r {
font-size: 16px;
color: #fff;
}
}
span {
font-size: 16px;
color: #666;
}
}
.tab_list {
padding: 0 18px;
.tab_item {
height: 68px;
line-height: 68px;
display: flex;
// justify-content: center;
align-items: center;
span:nth-child(1) {
width: 17px;
font-size: 30px;
font-family: DIN;
font-weight: bold;
font-style: italic;
color: #999999;
line-height: 9px;
}
span.color {
color: #ffa32c;
}
span:nth-child(2) {
padding: 0 20px 0 20px;
}
}
}
}
}
.banner_r {
width: 566px;
// /deep/.el-tabs__item {
// padding: 0 30px;
// font-size: 20px;
// }
// /deep/.el-tabs__item.is-active {
// font-weight: bold;
// color: #3394ff;
// }
// /deep/.el-tabs__active-bar {
// height: 4px;
// border-radius: 2px;
// background-color: #3394ff;
// }
// /deep/ .el-tabs__nav-wrap::after {
// height: 0;
// }
.banner_r_list {
position: relative;
height: 58px;
line-height: 58px;
div {
padding-right: 50px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
span {
position: absolute;
right: 0;
top: 0;
}
}
}
</style>

58
src/views/index.vue
View File

@ -35,8 +35,8 @@
<!-- 整体宽度 -->
<div class="content">
<!-- 头部 -->
<div class="header">
<div class="login_btn" v-if="2 == 3">
<div class="header p0-100">
<div class="login_btn" v-if="!avatar">
<el-button type="text" @click="handlePage">登录</el-button>
<i class="mark">|</i>
<el-button type="text" @click="handlePage">注册</el-button>
@ -55,7 +55,7 @@
</div>
<!-- ul li 列表 -->
<div class="uls">
<div class="lis content">
<div class="lis content p0-100">
<ul>
<li
:class="path == item.path ? 'is-active' : ''"
@ -72,7 +72,7 @@
</div>
</div>
<!-- 路由站位 -->
<div class="content">
<div class="content" style="padding:10px 0">
<router-view></router-view>
</div>
<div class="my_footer">
@ -221,7 +221,6 @@ export default {
.header {
height: 206px;
padding: 0 100px;
background-image: url(../assets/image/01.png);
.login_btn {
height: 60px;
@ -284,7 +283,7 @@ export default {
padding-left: 0;
li {
float: left;
padding: 0 50px;
padding: 0 41px;
cursor: pointer;
color: #fff;
font-size: 24px;
@ -381,53 +380,6 @@ export default {
}
}
}
.el-tabs--border-card {
border: 0;
}
/deep/.el-tabs--border-card > .el-tabs__header {
background-color: #ffa32c;
border-bottom: 0;
}
/deep/.el-tabs__item {
color: #fff;
font-size: 22px;
}
/deep/.el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
position: relative;
color: #fff;
background-color: #3394ff;
border-right-color: #3394ff;
border-left-color: #3394ff;
}
/deep/.el-tabs--border-card
> .el-tabs__header
.el-tabs__item.is-active::after {
content: '';
display: block;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid #fff;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
position: absolute;
bottom: -1px;
left: 50%;
transform: translateX(-50%);
}
/deep/.el-tabs--border-card
> .el-tabs__header
.el-tabs__item:not(.is-disabled):hover {
color: #fff;
background-color: #3394ff;
}
/deep/.el-tabs__item {
padding-left: 30px !important;
padding-right: 30px;
}
/deep/.el-tabs__nav-scroll {
padding: 0 100px;
}
}
@media (max-width: 1024px) {
.chart-wrapper {