Browse Source

优化

V1.0
dai 3 years ago
parent
commit
19c835c585
  1. 10
      src/assets/scss/modules/index.scss
  2. 881
      src/views/modules/home/index.vue
  3. 420
      src/views/modules/home/notice.vue

10
src/assets/scss/modules/index.scss

@ -323,6 +323,16 @@
border-radius: 2px;
overflow: hidden;
.empty {
text-align: center;
color: #999;
img {
display: block;
width: 120px;
margin: 100px auto 20px;
}
}
.item {
padding: 16px 0 12px;
border-bottom: 1px dashed #f0f5fa;

881
src/views/modules/home/index.vue

@ -1,215 +1,282 @@
<template>
<div>
<div class="g-row">
<div class="g-row-left">
<div class="m-box m-search">
<div class="wrap">
<div class="title">
<span>社区查询</span>
</div>
<div class="tabs">
<div
:class="{ 'z-on': searchData.type == 'jumin' }"
@click="searchData.type = 'jumin'"
>
查居民
</div>
<div
:class="{ 'z-on': searchData.type == 'fangwu' }"
@click="searchData.type = 'fangwu'"
>
查房屋
</div>
</div>
<div class="search">
<div class="search-input">
<div class="input">
<input
type="text"
:placeholder="typePlaceholder[searchData.type]"
v-model="searchData.searchKey"
@keyup.enter="handleClickSearchBtn"
/>
<div
class="close-btn"
v-if="searchData.searchKey != ''"
@click="searchData.searchKey = ''"
>
<img src="@/assets/img/shequ/close.png" />
</div>
</div>
<div class="btn" @click="handleClickSearchBtn">查一下</div>
</div>
<div class="btn2" @click="handleClickSearchBtn">
<img src="@/assets/images/index/i-search.png" />
智能搜索
</div>
</div>
</div>
</div>
<div class="m-box m-pan">
<div class="wrap">
<div class="header">
<img src="@/assets/images/index/title-icon-sqzl.png" />
<span>社区总览</span>
</div>
<div class="cnt">
<div class="cnt-left">
<div class="subtitle">
<img src="@/assets/images/index/i-sqjj.png" />
<span>社区简介</span>
</div>
<p>
{{ pandectData.deptName }}<span v-if="pandectData.gridCount"
>划分为{{ pandectData.underCount }}{{
pandectData.underName
}}</span
>现有居民{{ pandectData.homeCount }}{{
pandectData.resiCount
}}其中常住人口{{
pandectData.permanentResiCount
}}流动人口{{
pandectData.floatingResiCount
}}各类群体分布如下
</p>
<div class="subtitle">
<img src="@/assets/images/index/i-fxjg.png" />
<span>分析结果</span>
</div>
<p class="hint" v-if="resiCategory.list.length > 0">
<i>*</i> 根据数据分析结果建议重点关注
<b
>{{ resiCategory.list[0].name }}{{
resiCategory.list[1].name
}}{{ resiCategory.list[2].name }}</b
>
三类群体开展相关的社区服务和活动
</p>
</div>
<div class="cnt-right">
<div class="list">
<div
class="item"
@click="handleClickCategory(item)"
:key="item.code"
v-for="(item, index) in resiCategory.list"
>
<div>{{ ("0" + (index + 1)).substr(-2) }}.</div>
<div class="item-name">{{ item.name }}</div>
<div class="item-div"></div>
<div class="item-count">{{ item.count }}</div>
<div class="item-progress">
<b :style="{ width: item.per + '%' }"></b>
</div>
<div class="item-per">{{ item.per }} %</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="g-row-right">
<div class="m-box m-tx">
<div class="wrap">
<div class="header">
<img src="@/assets/images/index/title-icon-zntx.png" />
<span>智能提醒</span>
</div>
<div class="more" @click="toNoticePage">更多></div>
<div class="cnt">
<div
@click="handleClickNotice(item)"
class="item"
:key="'notice' + item.targetId + index"
v-for="(item, index) in noticeData"
>
<div class="item-date">{{ item.createdTime }}</div>
<div class="item-title">
{{ item.content }}
</div>
</div>
</div>
</div>
</div>
<div class="m-box m-tb">
<div class="wrap">
<div class="header">
<img src="@/assets/images/index/title-icon-zntb.png" />
<span>智能填报</span>
</div>
</div>
<div class="more">更多></div>
<div class="cnt">
<div class="item">
<img class="item-tag" src="@/assets/images/index/i-zntb.png" />
<div class="item-name">80-90周岁高龄老人生活补助申请表</div>
<div class="item-btns">
<div class="item-btn">
<img src="@/assets/images/index/i-tx.png" />
<span>填写</span>
</div>
<div class="item-btn">
<img src="@/assets/images/index/i-xz.png" />
<span>下载</span>
</div>
</div>
</div>
<div class="item">
<img class="item-tag" src="@/assets/images/index/i-zntb.png" />
<div class="item-name">80-90周岁高龄老人生活补助申请表</div>
<div class="item-btns">
<div class="item-btn">
<img src="@/assets/images/index/i-tx.png" />
<span>填写</span>
</div>
<div class="item-btn">
<img src="@/assets/images/index/i-xz.png" />
<span>下载</span>
</div>
</div>
</div>
<div class="item">
<img class="item-tag" src="@/assets/images/index/i-zntb.png" />
<div class="item-name">80-90周岁高龄老人生活补助申请表</div>
<div class="item-btns">
<div class="item-btn">
<img src="@/assets/images/index/i-tx.png" />
<span>填写</span>
</div>
<div class="item-btn">
<img src="@/assets/images/index/i-xz.png" />
<span>下载</span>
</div>
</div>
</div>
<div class="item">
<img class="item-tag" src="@/assets/images/index/i-zntb.png" />
<div class="item-name">80-90周岁高龄老人生活补助申请表</div>
<div class="item-btns">
<div class="item-btn">
<img src="@/assets/images/index/i-tx.png" />
<span>填写</span>
</div>
<div class="item-btn">
<img src="@/assets/images/index/i-xz.png" />
<span>下载</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<fastcall ref="fastcall" />
</div>
<div>
<div class="g-row">
<div class="g-row-left">
<div class="m-box m-search">
<div class="wrap">
<div class="title">
<span>社区查询</span>
</div>
<div class="tabs">
<div
:class="{ 'z-on': searchData.type == 'jumin' }"
@click="searchData.type = 'jumin'"
>
查居民
</div>
<div
:class="{ 'z-on': searchData.type == 'fangwu' }"
@click="searchData.type = 'fangwu'"
>
查房屋
</div>
</div>
<div class="search">
<div class="search-input">
<div class="input">
<input
type="text"
:placeholder="
typePlaceholder[searchData.type]
"
v-model="searchData.searchKey"
@keyup.enter="handleClickSearchBtn"
/>
<div
class="close-btn"
v-if="searchData.searchKey != ''"
@click="searchData.searchKey = ''"
>
<img
src="@/assets/img/shequ/close.png"
/>
</div>
</div>
<div class="btn" @click="handleClickSearchBtn">
查一下
</div>
</div>
<div class="btn2" @click="handleClickSearchBtn">
<img src="@/assets/images/index/i-search.png" />
智能搜索
</div>
</div>
</div>
</div>
<div class="m-box m-pan">
<div class="wrap">
<div class="header">
<img
src="@/assets/images/index/title-icon-sqzl.png"
/>
<span>社区总览</span>
</div>
<div class="cnt">
<div class="cnt-left">
<div class="subtitle">
<img
src="@/assets/images/index/i-sqjj.png"
/>
<span>社区简介</span>
</div>
<p>
{{ pandectData.deptName }}<span
v-if="pandectData.gridCount"
>划分为{{ pandectData.underCount }}{{
pandectData.underName
}}</span
>现有居民{{ pandectData.homeCount }}{{
pandectData.resiCount
}}其中常住人口{{
pandectData.permanentResiCount
}}流动人口{{
pandectData.floatingResiCount
}}各类群体分布如下
</p>
<div class="subtitle">
<img
src="@/assets/images/index/i-fxjg.png"
/>
<span>分析结果</span>
</div>
<p
class="hint"
v-if="resiCategory.list.length > 0"
>
<i>*</i> 根据数据分析结果建议重点关注
<b
>{{ resiCategory.list[0].name }}{{
resiCategory.list[1].name
}}{{ resiCategory.list[2].name }}</b
>
三类群体开展相关的社区服务和活动
</p>
</div>
<div class="cnt-right">
<div class="list">
<div
class="item"
@click="handleClickCategory(item)"
:key="item.code"
v-for="(
item, index
) in resiCategory.list"
>
<div>
{{
("0" + (index + 1)).substr(-2)
}}.
</div>
<div class="item-name">
{{ item.name }}
</div>
<div class="item-div"></div>
<div class="item-count">
{{ item.count }}
</div>
<div class="item-progress">
<b
:style="{
width: item.per + '%',
}"
></b>
</div>
<div class="item-per">
{{ item.per }} %
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="g-row-right">
<div class="m-box m-tx">
<div class="wrap">
<div class="header">
<img
src="@/assets/images/index/title-icon-zntx.png"
/>
<span>智能提醒</span>
</div>
<div class="more" @click="toNoticePage">更多></div>
<div class="cnt" v-if="noticeData.length > 0">
<div
@click="handleClickNotice(item)"
class="item"
:key="'notice' + item.targetId + index"
v-for="(item, index) in noticeData"
>
<div class="item-date">
{{ item.createdTime }}
</div>
<div class="item-title">
{{ item.content }}
</div>
</div>
</div>
<div class="cnt" v-else>
<div class="empty">
<img
src="~@/assets/images/shuju/renfang/index/empty.png"
/>
<span>暂无提醒</span>
</div>
</div>
</div>
</div>
<div class="m-box m-tb">
<div class="wrap">
<div class="header">
<img
src="@/assets/images/index/title-icon-zntb.png"
/>
<span>智能填报</span>
</div>
</div>
<div class="more">更多></div>
<div class="cnt">
<div class="item">
<img
class="item-tag"
src="@/assets/images/index/i-zntb.png"
/>
<div class="item-name">
80-90周岁高龄老人生活补助申请表
</div>
<div class="item-btns">
<div class="item-btn">
<img src="@/assets/images/index/i-tx.png" />
<span>填写</span>
</div>
<div class="item-btn">
<img src="@/assets/images/index/i-xz.png" />
<span>下载</span>
</div>
</div>
</div>
<div class="item">
<img
class="item-tag"
src="@/assets/images/index/i-zntb.png"
/>
<div class="item-name">
80-90周岁高龄老人生活补助申请表
</div>
<div class="item-btns">
<div class="item-btn">
<img src="@/assets/images/index/i-tx.png" />
<span>填写</span>
</div>
<div class="item-btn">
<img src="@/assets/images/index/i-xz.png" />
<span>下载</span>
</div>
</div>
</div>
<div class="item">
<img
class="item-tag"
src="@/assets/images/index/i-zntb.png"
/>
<div class="item-name">
80-90周岁高龄老人生活补助申请表
</div>
<div class="item-btns">
<div class="item-btn">
<img src="@/assets/images/index/i-tx.png" />
<span>填写</span>
</div>
<div class="item-btn">
<img src="@/assets/images/index/i-xz.png" />
<span>下载</span>
</div>
</div>
</div>
<div class="item">
<img
class="item-tag"
src="@/assets/images/index/i-zntb.png"
/>
<div class="item-name">
80-90周岁高龄老人生活补助申请表
</div>
<div class="item-btns">
<div class="item-btn">
<img src="@/assets/images/index/i-tx.png" />
<span>填写</span>
</div>
<div class="item-btn">
<img src="@/assets/images/index/i-xz.png" />
<span>下载</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<fastcall ref="fastcall" />
</div>
</template>
<script>
@ -220,201 +287,203 @@ import nextTick from "dai-js/tools/nextTick";
import fastcall from "@/views/modules/cpts/fastcall";
export default {
components: { fastcall },
data() {
return {
searchStatus: "ini", //ing over
searchData: {
type: "jumin",
searchKey: "",
},
typePlaceholder: {
jumin: "请输入姓名或电话或身份证号",
fangwu: "请输入“小区名称,楼号”,如:亿联小区,1号楼",
xuqiu: "请输入需求人或需求内容或服务方",
},
resiCategory: {
loading: false,
total: "",
list: [],
},
orgData: {
id: "",
level: "agency",
},
pandectData: {
communityName: "",
streetName: "",
gridCount: "",
resiCount: "",
homeCount: "",
floatingResiCount: "",
permanentResiCount: "",
},
noticeData: [],
};
},
computed: {
maxTableHeight() {
// return this.clientHeight - 450;
return 420;
},
...mapGetters(["clientHeight"]),
},
watch: {
"searchData.searchKey": function (val) {
if (val == "") {
this.searchStatus = "ini";
}
},
},
mounted() {
this.getApiData();
console.log(
"dynamicMenuRoutes----------------------------",
this.$store.state.sidebarMenuList
);
},
methods: {
handleClickCategory(item) {
this.$router.push({
path: "/main/base-resi",
query: {
category: item.code,
},
});
},
handleClickNotice(item) {
const { msgType, targetId } = item;
if (msgType == "community_house") {
this.$refs.fastcall.showHouseInfo(targetId);
} else if (msgType == "resident_base_info") {
this.$refs.fastcall.showResiInfo(targetId);
}
},
toNoticePage() {
this.$router.push({
path: "/main/home-notice",
});
},
toSearchPage(type, searchKey) {
this.$router.push({
path: "/main/shequ-chaxun",
query: {
type,
searchKey,
},
});
},
handleClickSearchBtn() {
const {
searchData: { type, searchKey },
} = this;
if (!searchKey) return this.$message.error("请输入搜索条件");
this.toSearchPage(type, searchKey);
},
async getApiData() {
await this.getOrgData();
this.getWarningList();
this.getPandectData();
this.getNoticeData();
},
//
async getOrgData() {
const url = "/gov/org/agency/maporg";
let params = {
orgId: "",
level: "",
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.orgData = data;
} else {
this.$message.error(msg);
}
},
//
async getPandectData() {
const url = "/actual/base/residentHouseMerge/communityOverview";
let params = {
// orgId: "",
// level: "",
};
const { data, code, msg } = await requestGet(url, params);
if (code === 0) {
if (data) {
this.pandectData = data;
}
} else {
this.$message.error(msg);
}
},
//
async getNoticeData() {
const url = "/message/intelligentMessage/list";
let params = {
last: "6",
};
const { data, code, msg } = await requestGet(url, params);
if (code === 0) {
if (data) {
this.noticeData = data;
}
} else {
this.$message.error(msg);
}
},
//
async getWarningList() {
const url = "/actual/base/resiCategory/categoryCountList";
let params = {
// id: this.orgData.id,
// level: "agency",
};
this.resiCategory.loading = true;
const { data, code, msg } = await requestGet(url, params);
this.resiCategory.loading = false;
if (code === 0) {
if (data) {
this.resiCategory.count = data.resiCount;
this.resiCategory.list = data.categoryList.map((item) => {
return {
code: item.categoryName,
name: resiCategoryMap[item.categoryName] || "",
count: item.categoryCount,
per: parseInt((100 * item.categoryCount) / data.resiCount),
const: "const",
};
});
}
} else {
this.$message.error(msg);
}
},
},
components: { fastcall },
data() {
return {
searchStatus: "ini", //ing over
searchData: {
type: "jumin",
searchKey: "",
},
typePlaceholder: {
jumin: "请输入姓名或电话或身份证号",
fangwu: "请输入“小区名称,楼号”,如:亿联小区,1号楼",
xuqiu: "请输入需求人或需求内容或服务方",
},
resiCategory: {
loading: false,
total: "",
list: [],
},
orgData: {
id: "",
level: "agency",
},
pandectData: {
communityName: "",
streetName: "",
gridCount: "",
resiCount: "",
homeCount: "",
floatingResiCount: "",
permanentResiCount: "",
},
noticeData: [],
};
},
computed: {
maxTableHeight() {
// return this.clientHeight - 450;
return 420;
},
...mapGetters(["clientHeight"]),
},
watch: {
"searchData.searchKey": function (val) {
if (val == "") {
this.searchStatus = "ini";
}
},
},
mounted() {
this.getApiData();
console.log(
"dynamicMenuRoutes----------------------------",
this.$store.state.sidebarMenuList
);
},
methods: {
handleClickCategory(item) {
this.$router.push({
path: "/main/base-resi",
query: {
category: item.code,
},
});
},
handleClickNotice(item) {
const { msgType, targetId } = item;
if (msgType == "community_house") {
this.$refs.fastcall.showHouseInfo(targetId);
} else if (msgType == "resident_base_info") {
this.$refs.fastcall.showResiInfo(targetId);
}
},
toNoticePage() {
this.$router.push({
path: "/main/home-notice",
});
},
toSearchPage(type, searchKey) {
this.$router.push({
path: "/main/shequ-chaxun",
query: {
type,
searchKey,
},
});
},
handleClickSearchBtn() {
const {
searchData: { type, searchKey },
} = this;
if (!searchKey) return this.$message.error("请输入搜索条件");
this.toSearchPage(type, searchKey);
},
async getApiData() {
await this.getOrgData();
this.getWarningList();
this.getPandectData();
this.getNoticeData();
},
//
async getOrgData() {
const url = "/gov/org/agency/maporg";
let params = {
orgId: "",
level: "",
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.orgData = data;
} else {
this.$message.error(msg);
}
},
//
async getPandectData() {
const url = "/actual/base/residentHouseMerge/communityOverview";
let params = {
// orgId: "",
// level: "",
};
const { data, code, msg } = await requestGet(url, params);
if (code === 0) {
if (data) {
this.pandectData = data;
}
} else {
this.$message.error(msg);
}
},
//
async getNoticeData() {
const url = "/message/intelligentMessage/list";
let params = {
last: "6",
};
const { data, code, msg } = await requestGet(url, params);
if (code === 0) {
if (data) {
this.noticeData = data;
}
} else {
this.$message.error(msg);
}
},
//
async getWarningList() {
const url = "/actual/base/resiCategory/categoryCountList";
let params = {
// id: this.orgData.id,
// level: "agency",
};
this.resiCategory.loading = true;
const { data, code, msg } = await requestGet(url, params);
this.resiCategory.loading = false;
if (code === 0) {
if (data) {
this.resiCategory.count = data.resiCount;
this.resiCategory.list = data.categoryList.map((item) => {
return {
code: item.categoryName,
name: resiCategoryMap[item.categoryName] || "",
count: item.categoryCount,
per: parseInt(
(100 * item.categoryCount) / data.resiCount
),
const: "const",
};
});
}
} else {
this.$message.error(msg);
}
},
},
};
</script>

420
src/views/modules/home/notice.vue

@ -1,50 +1,59 @@
<template>
<div>
<div class="m-tx">
<div class="wrap">
<div class="tabs">
<el-tabs v-model="type" @tab-click="handleClickTab">
<el-tab-pane label="全部" name="all"></el-tab-pane>
<el-tab-pane label="已读" name="readed"></el-tab-pane>
<el-tab-pane label="未读" name="unreaded"></el-tab-pane>
</el-tabs>
</div>
<!-- <div class="btn-clear">清除未读</div> -->
<div class="cnt">
<div
@click="handleClickNotice(item, index)"
:class="{ 'z-readed': item.readFlag == 1 }"
class="item"
:key="'notice' + item.targetId + index"
v-for="(item, index) in noticeData"
>
<img
class="item-tag"
src="@/assets/images/index/title-icon-zntb.png"
/>
<div class="item-title">
{{ item.content }}
</div>
<div class="item-date">{{ item.createdTime }}</div>
</div>
</div>
<div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="pageNo"
:page-sizes="[20, 50, 100, 200]"
:page-size="parseInt(pageSize)"
layout="sizes, prev, pager, next, total"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
<fastcall ref="fastcall" />
</div>
<div>
<div class="m-tx">
<div class="wrap">
<div class="tabs">
<el-tabs v-model="type" @tab-click="handleClickTab">
<el-tab-pane label="全部" name="all"></el-tab-pane>
<el-tab-pane label="已读" name="readed"></el-tab-pane>
<el-tab-pane label="未读" name="unreaded"></el-tab-pane>
</el-tabs>
</div>
<!-- <div class="btn-clear">清除未读</div> -->
<div class="cnt" v-if="noticeData.length > 0">
<div
@click="handleClickNotice(item, index)"
:class="{ 'z-readed': item.readFlag == 1 }"
class="item"
:key="'notice' + item.targetId + index"
v-for="(item, index) in noticeData"
>
<img
class="item-tag"
src="@/assets/images/index/title-icon-zntb.png"
/>
<div class="item-title">
{{ item.content }}
</div>
<div class="item-date">{{ item.createdTime }}</div>
</div>
</div>
<div class="cnt" v-else>
<div class="empty">
<img
src="~@/assets/images/shuju/renfang/index/empty.png"
/>
<span>暂无提醒</span>
</div>
</div>
<div>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="pageNo"
:page-sizes="[20, 50, 100, 200]"
:page-size="parseInt(pageSize)"
layout="sizes, prev, pager, next, total"
:total="total"
>
</el-pagination>
</div>
</div>
</div>
<fastcall ref="fastcall" />
</div>
</template>
<script>
@ -53,88 +62,90 @@ import nextTick from "dai-js/tools/nextTick";
import fastcall from "@/views/modules/cpts/fastcall";
export default {
components: { fastcall },
data() {
return {
type: "all",
pageNo: 1,
pageSize: window.localStorage.getItem("pageSize") || 20,
total: 1,
noticeData: [],
};
},
computed: {},
watch: {},
mounted() {
this.getList();
},
methods: {
handleClickNotice(item, index) {
const { msgType, targetId } = item;
if (msgType == "community_house") {
this.$refs.fastcall.showHouseInfo(targetId);
} else if (msgType == "resident_base_info") {
this.$refs.fastcall.showResiInfo(targetId);
}
this.read(item, index);
},
async read(item) {
if (item.readFlag == 1) return;
const url = "/message/intelligentMessage/msg/clear";
let params = {
id: item.id,
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
this.noticeData[index].readFlag = 1;
console.log("消息已读");
} else {
this.$message.error(msg);
}
},
handleClickTab(type) {
console.log(type);
this.getList();
},
handleSizeChange(val) {
this.pageSize = val;
localStorage.setItem("pageSize", val);
this.getList();
},
handleCurrentChange(val) {
this.pageNo = val;
this.getList();
},
//
async getList() {
const url = "/message/intelligentMessage/page";
let params = {
page: this.pageNo,
limit: this.pageSize,
};
const { type } = this;
if (type == "readed") {
params.readFlag = 1;
} else if (type == "unreaded") {
params.readFlag = 0;
}
const { data, code, msg } = await requestGet(url, params);
if (code === 0) {
this.total = data.total;
this.noticeData = data.list;
} else {
this.$message.error(msg);
}
},
},
components: { fastcall },
data() {
return {
type: "all",
pageNo: 1,
pageSize: window.localStorage.getItem("pageSize") || 20,
total: 1,
noticeData: [],
};
},
computed: {},
watch: {},
mounted() {
this.getList();
},
methods: {
handleClickNotice(item, index) {
const { msgType, targetId } = item;
if (msgType == "community_house") {
this.$refs.fastcall.showHouseInfo(targetId);
} else if (msgType == "resident_base_info") {
this.$refs.fastcall.showResiInfo(targetId);
}
this.read(item, index);
},
async read(item) {
if (item.readFlag == 1) return;
const url = "/message/intelligentMessage/msg/clear";
let params = {
id: item.id,
};
const { data, code, msg } = await requestPost(url, params);
if (code === 0) {
const { noticeData } = this;
noticeData[index].readFlag = 1;
this.noticeData = noticeData;
console.log("消息已读");
} else {
this.$message.error(msg);
}
},
handleClickTab(type) {
console.log(type);
this.getList();
},
handleSizeChange(val) {
this.pageSize = val;
localStorage.setItem("pageSize", val);
this.getList();
},
handleCurrentChange(val) {
this.pageNo = val;
this.getList();
},
//
async getList() {
const url = "/message/intelligentMessage/page";
let params = {
page: this.pageNo,
limit: this.pageSize,
};
const { type } = this;
if (type == "readed") {
params.readFlag = 1;
} else if (type == "unreaded") {
params.readFlag = 0;
}
const { data, code, msg } = await requestGet(url, params);
if (code === 0) {
this.total = data.total;
this.noticeData = data.list;
} else {
this.$message.error(msg);
}
},
},
};
</script>
@ -142,82 +153,93 @@ export default {
@import "~@/assets/scss/c/function.scss";
.m-tx {
position: relative;
margin: 10px 6px;
padding: 12px 20px;
background: #ffffff;
box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
0px 3px 6px -4px rgba(0, 0, 0, 0.12);
border-radius: 2px;
.cnt {
box-sizing: border-box;
border-radius: 2px;
overflow: hidden;
padding: 0 12px;
.z-readed {
opacity: 0.5;
}
.item {
display: flex;
align-items: center;
padding: 16px 0 12px;
border-bottom: 1px dashed #f0f5fa;
&:last-child {
border-bottom: none;
}
.item-tag {
display: block;
margin-right: 15px;
width: 24px;
height: 24px;
}
.item-title {
// @include toe;
width: 60%;
margin-right: 100px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
line-height: 22px;
}
.item-date {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
line-height: 17px;
}
}
}
.btn-clear {
position: absolute;
top: 14px;
right: 15px;
width: 32px;
height: 12px;
width: 75px;
height: 25px;
background: linear-gradient(0deg, #db3b3b 1%, #ff8080 100%);
border-radius: 3px;
font-size: 14px;
font-weight: 500;
color: #ffffff;
line-height: 25px;
text-align: center;
}
position: relative;
margin: 10px 6px;
padding: 12px 20px;
background: #ffffff;
box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
0px 3px 6px -4px rgba(0, 0, 0, 0.12);
border-radius: 2px;
.cnt {
box-sizing: border-box;
border-radius: 2px;
overflow: hidden;
padding: 0 12px;
.empty {
margin: 100px 0;
text-align: center;
color: #999;
img {
display: block;
width: 120px;
margin: 20px auto;
}
}
.z-readed {
opacity: 0.5;
}
.item {
display: flex;
align-items: center;
padding: 16px 0 12px;
border-bottom: 1px dashed #f0f5fa;
&:last-child {
border-bottom: none;
}
.item-tag {
display: block;
margin-right: 15px;
width: 24px;
height: 24px;
}
.item-title {
// @include toe;
width: 60%;
margin-right: 100px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.85);
line-height: 22px;
}
.item-date {
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(0, 0, 0, 0.45);
line-height: 17px;
}
}
}
.btn-clear {
position: absolute;
top: 14px;
right: 15px;
width: 32px;
height: 12px;
width: 75px;
height: 25px;
background: linear-gradient(0deg, #db3b3b 1%, #ff8080 100%);
border-radius: 3px;
font-size: 14px;
font-weight: 500;
color: #ffffff;
line-height: 25px;
text-align: center;
}
}
/deep/ .el-tabs__nav-wrap::after {
height: 1px;
background-color: #f0f5fa;
height: 1px;
background-color: #f0f5fa;
}
/deep/ .el-pagination__total {
// float: left;
// float: left;
}
</style>

Loading…
Cancel
Save