<template>
|
<div class="bg-1" style="padding: 15px 5px">
|
<el-row :gutter="25">
|
<el-col :lg="14" :md="14" :sm="24" :xl="14" :xs="24">
|
<div class="left-1">
|
<div class="say">
|
<div style="display: flex; align-items: center; flex-wrap: wrap">
|
<div class="say-1">{{ nickName }} 您好！祝您开心每一天</div>
|
<div class="say-2">当前时间： {{ now }}</div>
|
</div>
|
</div>
|
</div>
|
<div
|
v-loading="workLoading"
|
class="left-2 card"
|
style="overflow: hidden"
|
>
|
<div
|
v-for="(item, index) in workDay"
|
:key="index"
|
class="left-2-item"
|
>
|
<div class="left-item-title">
|
<span style="font-size: 18px">{{ item }}</span>
|
<span style="font-size: 14px; color: #999999">{{
|
weekdays[index]
|
}}</span>
|
</div>
|
<div class="left-item-body">
|
<div
|
v-for="(m, i) in workList[index]"
|
:key="i"
|
:class="{
|
color0: m.type == 0,
|
color1: m.type == 1,
|
color2: m.type == 2,
|
}"
|
class="body-item"
|
>
|
<div>
|
<span style="font-size: 12px; margin-bottom: 17px">{{
|
m.text
|
}}</span>
|
<div style="display: flex">
|
<span
|
style="
|
display: inline-block;
|
height: 24px;
|
width: 24px;
|
border-radius: 50%;
|
line-height: 24px;
|
text-align: center;
|
background: #c0c4cc;
|
color: #fff;
|
"
|
>{{ m.name.charAt(0) }}</span
|
>
|
<span
|
v-if="m.insState == 0"
|
class="body-item-insState"
|
style="background-color: #909399; font-size: 12px"
|
>待检验</span
|
>
|
<span
|
v-if="m.insState == 1"
|
class="body-item-insState"
|
style="background-color: #e6a23c; font-size: 12px"
|
>检验中</span
|
>
|
<span
|
v-if="m.insState == 2"
|
class="body-item-insState"
|
style="background-color: #67c23a; font-size: 12px"
|
>已检验</span
|
>
|
<span
|
v-if="m.insState == 3"
|
class="body-item-insState"
|
style="background-color: #e6a23c; font-size: 12px"
|
>待复核</span
|
>
|
<span
|
v-if="m.insState == 4"
|
class="body-item-insState"
|
style="background-color: #f56c6c; font-size: 9px"
|
>复核未通过</span
|
>
|
<span
|
v-if="m.insState == 5"
|
class="body-item-insState"
|
style="background-color: #67c23a; font-size: 10px"
|
>复核通过</span
|
>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</el-col>
|
<el-col :lg="10" :md="10" :sm="24" :xl="10" :xs="24">
|
<div class="right-1 card">
|
<div class="right-1-item">
|
<div class="img">
|
<img alt="" src="@/assets/index_image/index-0.svg" />
|
</div>
|
<div class="mun">
|
<p style="font-size: 20px">
|
{{ getNumberFourTypes.totalNumberOfMessages }}
|
</p>
|
<p style="font-size: 14px; margin-bottom: 10px">我的待办</p>
|
</div>
|
</div>
|
<div class="right-1-item">
|
<div class="img">
|
<img alt="" src="@/assets/index_image/index-1.svg" />
|
</div>
|
<div class="mun">
|
<p style="font-size: 20px">
|
{{ getNumberFourTypes.totalNumberOfReadMessages }}
|
</p>
|
<p style="font-size: 14px; margin-bottom: 10px">已办事宜</p>
|
</div>
|
</div>
|
<div class="right-1-item">
|
<div class="img">
|
<img alt="" src="@/assets/index_image/index-2.svg" />
|
</div>
|
<div class="mun">
|
<p style="font-size: 20px">
|
{{ getNumberFourTypes.remainingToDo }}
|
</p>
|
<p style="font-size: 14px; margin-bottom: 10px">剩余待办</p>
|
</div>
|
</div>
|
<div class="right-1-item">
|
<div class="img">
|
<img alt="" src="@/assets/index_image/index-3.svg" />
|
</div>
|
<div class="mun">
|
<p style="font-size: 20px">
|
{{ getNumberFourTypes.totalNumberOfMessagesInThePastSevenDays }}
|
</p>
|
<p style="font-size: 14px; margin-bottom: 10px">近期事宜</p>
|
</div>
|
</div>
|
</div>
|
<div class="right-2 card">
|
<div class="right-2-title">
|
<span style="color: #333333; font-size: 16px">我的日程</span>
|
<span
|
style="cursor: pointer; font-size: 12px; color: #3a7bfa"
|
@click="dialogVisible = true"
|
>添加我的日程</span
|
>
|
</div>
|
<div class="right-2-body">
|
<div class="calendar" style="width: 49%">
|
<div class="control">
|
<el-button
|
class="prevm"
|
icon="el-icon-arrow-left"
|
@click="prevMonth(calendarValue)"
|
></el-button>
|
<span>{{
|
calendarValue.getFullYear() +
|
"年" +
|
(calendarValue.getMonth() + 1) +
|
"月"
|
}}</span>
|
<el-button
|
class="nextm"
|
icon="el-icon-arrow-right"
|
@click="nextMonth(calendarValue)"
|
></el-button>
|
</div>
|
<el-calendar v-model="calendarValue" class="calendar">
|
<template slot="dateCell" slot-scope="{ date, data }">
|
<span>
|
{{ data.day.split("-").slice(2) + "" }}
|
</span>
|
<!-- <el-badge v-if="data.isSelected" is-dot class="item">
|
</el-badge> -->
|
</template>
|
</el-calendar>
|
</div>
|
<div
|
v-loading="scheduleLoading"
|
class="right-2-list"
|
style="width: 49%; height: 286px"
|
>
|
<div
|
v-for="(m, i) in listScheduleByMe"
|
:key="i"
|
class="list2-item"
|
>
|
<span>{{ m.scheduleTimes }}</span>
|
<el-tooltip
|
:content="m.text"
|
effect="dark"
|
placement="top"
|
style="margin-left: 10px"
|
>
|
<p class="ellipsis-multiline">{{ m.text }}</p>
|
</el-tooltip>
|
</div>
|
<span
|
v-if="listScheduleByMe.length == 0"
|
style="
|
color: rgb(144, 147, 153);
|
font-size: 14px;
|
text-align: center;
|
margin: 120px 0;
|
display: inline-block;
|
width: 100%;
|
"
|
>暂无数据</span
|
>
|
</div>
|
</div>
|
</div>
|
<div class="right-3 card" style="overflow: hidden">
|
<div class="right-3-tab">
|
<div
|
class="tab-item"
|
style="cursor: pointer"
|
:class="{ active: currentIndex == 4 }"
|
@click="currentIndex = 4"
|
>
|
预警提醒
|
</div>
|
<div
|
class="tab-item"
|
style="cursor: pointer"
|
:class="{ active: currentIndex == 5 }"
|
@click="currentIndex = 5"
|
>
|
通知通告
|
</div>
|
</div>
|
<div class="right-3-list" v-loading="listLoading">
|
<scroll-pagination
|
@load="getList"
|
:finishLoding="finishLoding"
|
:list="list"
|
v-if="list.length > 0 || listLoading"
|
>
|
<div class="list3-item" v-for="(m, i) in list" :key="i">
|
<div class="list3-item-title">
|
<img src="../assets/index_image/index-tip.svg" alt="" />
|
<p>{{ m.theme }}</p>
|
</div>
|
<div class="list3-item-info">
|
<p
|
style="width: 73%; -webkit-line-clamp: 1; cursor: pointer"
|
class="ellipsis-multiline"
|
@click="goNoticeDetail(m)"
|
>
|
<!-- 编号<span style="color:#3A7BFA;"> SB20240101-001 </span>的设备将于2023-09-09 11:11:11过期 -->
|
{{ m.content }}
|
</p>
|
<p>{{ m.createTime }}</p>
|
</div>
|
</div>
|
</scroll-pagination>
|
<div
|
v-if="list.length < 1 && !listLoading"
|
style="
|
color: #909399;
|
font-size: 14px;
|
text-align: center;
|
margin-top: 80px;
|
"
|
>
|
暂无数据
|
</div>
|
</div>
|
</div>
|
</el-col>
|
</el-row>
|
<el-dialog :visible.sync="dialogVisible" title="日程添加" width="400px">
|
<div class="body" style="max-height: 60vh">
|
<el-row>
|
<el-col :span="22" class="search_thing">
|
<div class="search_label">
|
<span style="color: red; margin-right: 4px">*</span>时间：
|
</div>
|
<div class="search_input">
|
<el-date-picker
|
v-model="query.time"
|
format="yyyy-MM-dd HH:mm:ss"
|
placeholder="选择日期时间"
|
size="small"
|
style="width: 100%"
|
type="datetime"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
>
|
</el-date-picker>
|
</div>
|
</el-col>
|
<el-col :span="22" class="search_thing">
|
<div class="search_label">
|
<span style="color: red; margin-right: 4px">*</span>内容：
|
</div>
|
<div class="search_input">
|
<el-input
|
v-model="query.text"
|
:rows="2"
|
placeholder="请输入内容"
|
size="small"
|
type="textarea"
|
></el-input>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-row>
|
<el-button @click="handleCancel">取 消</el-button>
|
<el-button :loading="loading" type="primary" @click="submit"
|
>确 定</el-button
|
>
|
</el-row>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {
|
pageNotice,
|
triggerModificationStatusToRead,
|
getNumberFourTypesMessagesHomePage,
|
} from "@/api/system/notice";
|
import {
|
addSchedule,
|
calendarWorkByWeek,
|
ScheduleByMe,
|
} from "@/api/chart/dailyBusinessStatistical.js";
|
import { getYearAndMonthAndDays } from "@/utils/date.js";
|
import ScrollPagination from "@/components/index/scroll-paging.vue";
|
import { mapGetters } from "vuex";
|
export default {
|
components: {
|
ScrollPagination,
|
},
|
computed: {
|
...mapGetters(["nickName"]),
|
},
|
data() {
|
return {
|
now: null,
|
calendarValue: new Date(),
|
currentIndex: 5,
|
dialogVisible: false,
|
query: {
|
time: "",
|
text: "",
|
},
|
loading: false,
|
workLoading: false,
|
workList: [],
|
workDay: [],
|
weekdays: [],
|
listScheduleByMe: [],
|
scheduleLoading: false,
|
list: [],
|
currentPage: 1,
|
pageSize: 8, // 一页7条
|
total: null,
|
listLoading: true, // 组件loading的展示,默认为true
|
finishLoding: false, // 加载完成，显示已经没有更多了
|
timer: null,
|
keyMap: {},
|
getNumberFourTypes: {},
|
};
|
},
|
watch: {
|
calendarValue(val) {
|
this.getScheduleByMe();
|
},
|
currentIndex() {
|
this.keyMap = {};
|
this.currentPage = 1;
|
this.list = [];
|
this.getList();
|
},
|
},
|
mounted() {
|
this.nowTime();
|
setInterval(() => {
|
this.nowTime();
|
}, 1000);
|
this.weekdays = this.getWeekdaysForNextWeek();
|
this.init();
|
this.currentPage = 1;
|
this.keyMap = {};
|
this.list = [];
|
this.getList();
|
this.getScheduleByMe();
|
this.timer && clearInterval(this.timer);
|
this.timer = setInterval(() => {
|
this.init();
|
this.currentPage = 1;
|
this.keyMap = {};
|
this.list = [];
|
this.getList();
|
this.getScheduleByMe();
|
}, 1000 * 60 * 10);
|
this.getNumberFourTypesFun();
|
},
|
methods: {
|
changeState(val) {
|
if (val == 0) {
|
return "待检验";
|
}
|
},
|
currentIndexChange() {
|
this.keyMap = {};
|
this.currentPage = 1;
|
this.list = [];
|
this.getList();
|
},
|
getNumberFourTypesFun() {
|
getNumberFourTypesMessagesHomePage()
|
.then((res) => {
|
if (res.code === 200) {
|
this.getNumberFourTypes = res.data;
|
}
|
})
|
.catch((error) => {
|
console.error(error);
|
});
|
},
|
getList() {
|
const key = `_${this.currentPage}`;
|
const value = this.keyMap[key];
|
// 如果value存在，表示缓存有值，那么阻止请求
|
if (value) {
|
return;
|
}
|
// value不存在，表示第一次请求,设置占位
|
this.keyMap[key] = "temp";
|
if (this.currentPage == 1) {
|
this.listLoading = true;
|
}
|
if (this.list.length == 0) {
|
this.finishLoding = false;
|
}
|
pageNotice({
|
size: this.pageSize,
|
current: this.currentPage,
|
messageType: this.currentIndex,
|
})
|
.then((res) => {
|
if (res.code === 201) {
|
return;
|
}
|
let list = res.data.records;
|
this.total = res.data.total;
|
if (list.length == 0) {
|
this.finishLoding = true;
|
} else {
|
if (list.length < this.pageSize) {
|
this.finishLoding = true;
|
}
|
this.list = this.list.concat(list);
|
if (this.total == this.list.length) {
|
this.finishLoding = true;
|
}
|
this.currentPage++;
|
}
|
this.listLoading = false;
|
})
|
.catch((error) => {
|
console.error(error);
|
});
|
},
|
nowTime() {
|
var date = new Date();
|
var y = date.getFullYear();
|
var m = date.getMonth() + 1;
|
var d = date.getDate();
|
var h = date.getHours();
|
this.timeH = h;
|
var min = date.getMinutes();
|
var s = date.getSeconds();
|
if (s < 10) {
|
s = "0" + s;
|
}
|
if (min < 10) {
|
min = "0" + min;
|
}
|
if (h < 10) {
|
h = "0" + h;
|
}
|
if (d < 10) {
|
d = "0" + d;
|
}
|
if (m < 10) {
|
m = "0" + m;
|
}
|
this.now = y + "-" + m + "-" + d + " " + h + ":" + min + ":" + s;
|
},
|
nextMonth(value) {
|
let year = this.calendarValue.getFullYear(); // 当前年份
|
let month = this.calendarValue.getMonth() + 1; // 当前月份
|
let day = this.calendarValue.getDate(); // 当前天数
|
let nextyear = year;
|
let nextmonth = parseInt(month) + 1;
|
// 判断下一月是否会进入下一年
|
if (nextmonth === 13) {
|
nextyear = parseInt(year) + 1;
|
nextmonth = 1;
|
}
|
// 计算下一年下一个月有多少天
|
let nextday = new Date(nextyear, nextmonth, 0);
|
let nextdays = nextday.getDate();
|
if (day > nextdays) {
|
day = nextdays;
|
if (day < 10) {
|
day = "0" + day;
|
}
|
}
|
if (nextmonth < 10) {
|
nextmonth = "0" + nextmonth;
|
}
|
let nexttime = nextyear + "-" + nextmonth + "-" + day;
|
|
// 将得到的年月日格式转换为标准时间，与饿了么时间格式相同才能联动
|
this.calendarValue = new Date(nexttime);
|
},
|
prevMonth(time) {
|
let year = this.calendarValue.getFullYear(); // 当前年份
|
let month = this.calendarValue.getMonth() + 1; // 当前月份
|
let day = this.calendarValue.getDate(); // 当前天数
|
let prevyear = year;
|
let prevmonth = parseInt(month) - 1;
|
// 判断上一月是否会进入上一年
|
if (prevmonth === 0) {
|
prevyear = parseInt(year) - 1;
|
prevmonth = 12;
|
}
|
// 计算上一年上一个月有多少天
|
let prevday = new Date(prevyear, prevmonth, 0);
|
let prevdays = prevday.getDate();
|
if (day > prevdays) {
|
day = prevdays;
|
if (day < 10) {
|
day = "0" + day;
|
}
|
}
|
if (prevmonth < 10) {
|
prevmonth = "0" + prevmonth;
|
}
|
let prevtime = prevyear + "-" + prevmonth + "-" + day;
|
|
// 将得到的年月日格式转换为标准时间，与饿了么时间格式相同才能联动
|
this.calendarValue = new Date(prevtime);
|
},
|
handleCancel() {
|
this.dialogVisible = false;
|
this.query = {
|
time: "",
|
text: "",
|
};
|
},
|
submit() {
|
if (!this.query.time) {
|
this.$message.error("时间未填写");
|
return;
|
}
|
if (!this.query.text) {
|
this.$message.error("内容未填写");
|
return;
|
}
|
this.loading = true;
|
addSchedule(this.query)
|
.then((res) => {
|
this.loading = false;
|
if (res.code == 201) {
|
this.$message.error("操作失败");
|
return;
|
}
|
this.$message.success("保存成功");
|
this.handleCancel();
|
this.getScheduleByMe();
|
})
|
.catch((error) => {
|
console.error(error);
|
});
|
},
|
init() {
|
this.workLoading = true;
|
calendarWorkByWeek()
|
.then((res) => {
|
if (res.code == 201) return;
|
this.workLoading = false;
|
this.workList = [];
|
for (let i = 0; i < 7; i++) {
|
this.workList.push(res.data[`work${i}`]);
|
}
|
this.workDay = res.data.weekDays.map((m) => {
|
let arr = m.split("-");
|
return arr[2];
|
});
|
})
|
.catch((error) => {
|
console.error(error);
|
});
|
},
|
getWeekdaysForNextWeek() {
|
let weekdays = [];
|
for (let i = 0; i < 7; i++) {
|
let date = new Date();
|
date.setDate(date.getDate() - i); // 今天之后的日子
|
let day = date.getDay(); // 0-6 代表星期日到星期六
|
weekdays.push(day);
|
}
|
weekdays.reverse();
|
weekdays = weekdays.map((m) => {
|
let day = "";
|
switch (m) {
|
case 0:
|
day = "星期天";
|
break;
|
case 1:
|
day = "星期一";
|
break;
|
case 2:
|
day = "星期二";
|
break;
|
case 3:
|
day = "星期三";
|
break;
|
case 4:
|
day = "星期四";
|
break;
|
case 5:
|
day = "星期五";
|
break;
|
case 6:
|
day = "星期六";
|
break;
|
}
|
return day;
|
});
|
return weekdays;
|
},
|
getScheduleByMe() {
|
this.scheduleLoading = true;
|
ScheduleByMe({
|
date: getYearAndMonthAndDays(this.calendarValue),
|
})
|
.then((res) => {
|
this.loading = false;
|
this.scheduleLoading = false;
|
if (res.code == 201) {
|
return;
|
}
|
this.listScheduleByMe = res.data.map((m) => {
|
if (m.scheduleTime) {
|
let time = m.scheduleTime.split(" ")[1].split(":");
|
m.scheduleTimes = time[0] + ":" + time[1];
|
} else {
|
m.scheduleTimes = "";
|
}
|
return m;
|
});
|
})
|
.catch((error) => {
|
console.error(error);
|
});
|
},
|
goNoticeDetail(row) {
|
triggerModificationStatusToRead(row.id)
|
.then((res) => {
|
row.num = Math.random(100);
|
this.$bus.$emit("change", JSON.stringify(row));
|
this.$parent.addTab(
|
{
|
v: "消息详情",
|
i: "el-icon-s-tools",
|
u: "notice-detail",
|
k: 35,
|
p: "abcd",
|
},
|
29
|
);
|
})
|
.catch((error) => {
|
console.error(error);
|
});
|
},
|
},
|
deactivated() {
|
this.timer && clearInterval(this.timer);
|
},
|
};
|
</script>
|
|
<style scoped lang="scss">
|
.left-1 {
|
background-image: url("~@/assets/index_image/index-img1.png");
|
background-size: 100% 100%;
|
height: 118px;
|
margin-bottom: 16px;
|
border-radius: 16px;
|
}
|
|
.left-1 .say {
|
height: 100%;
|
display: flex;
|
align-items: center;
|
margin-left: 15%;
|
width: 45%;
|
}
|
|
.left-1 .say div {
|
color: #fff;
|
margin: 4px 0;
|
}
|
|
.left-1 .say-1 {
|
font-size: 18px;
|
}
|
|
.left-1 .say-2 {
|
font-size: 17px;
|
}
|
|
::-webkit-scrollbar {
|
width: 0px;
|
}
|
|
::-webkit-scrollbar-thumb {
|
background-color: transparent;
|
border-radius: 3px;
|
}
|
|
.card {
|
background: #ffffff;
|
border-radius: 16px;
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.right-1 {
|
height: 118px;
|
padding: 10px 10px 4px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-bottom: 16px;
|
}
|
|
.right-1-item {
|
width: 25%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
.right-1-item .mun {
|
margin-left: 6px;
|
color: #0166e2;
|
}
|
|
.right-2 {
|
width: 100%;
|
padding: 13px 14px 8px;
|
margin-bottom: 16px;
|
}
|
|
.right-2-title {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
}
|
|
.right-2-body {
|
width: 100%;
|
margin-top: 20px;
|
display: flex;
|
align-items: flex-start;
|
justify-content: space-between;
|
}
|
|
.control {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
box-sizing: border-box;
|
padding: 0px 0 10px;
|
}
|
|
.control .el-button {
|
width: 32px;
|
height: 32px;
|
border-radius: 8px;
|
border: 1px solid #e8e8e8;
|
background: #fff;
|
padding: 0;
|
color: #0166e2;
|
font-size: 20px;
|
}
|
|
.list2-item {
|
line-height: 22px;
|
display: flex;
|
margin-bottom: 12px;
|
font-size: 14px;
|
}
|
|
.right-3-tab {
|
display: flex;
|
align-items: center;
|
margin-bottom: 12px;
|
}
|
.tab-item {
|
width: 50%;
|
box-sizing: border-box;
|
text-align: center;
|
padding: 14px 0;
|
font-size: 20px;
|
background: #f5f7fb;
|
color: #333333;
|
}
|
.tab-item.active {
|
background: #fff;
|
color: #ff3838;
|
}
|
.right-3-list {
|
padding: 0 12px 8px;
|
box-sizing: border-box;
|
height: 390px;
|
overflow-y: auto;
|
}
|
.list3-item {
|
padding: 6px 4px;
|
}
|
.list3-item:hover {
|
background: rgba(58, 123, 250, 0.05);
|
}
|
.list3-item-title {
|
display: flex;
|
align-items: center;
|
p {
|
margin: 0;
|
}
|
}
|
.list3-item-info {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
color: #666666;
|
font-size: 14px;
|
}
|
|
.left-2 {
|
display: grid;
|
grid-template-columns: repeat(7, 1fr);
|
height: calc(100vh - 245px);
|
}
|
|
.left-2-item {
|
border-right: 1px solid #f1f1f1;
|
overflow: hidden !important;
|
}
|
|
.left-2-item:nth-last-child(1) {
|
border-right: 0;
|
}
|
|
.left-2-item:hover {
|
background: rgba(58, 123, 250, 0.05);
|
}
|
|
.left-2-item:hover .left-item-title span {
|
color: #3a7bfa !important;
|
}
|
|
.left-item-title {
|
border-bottom: 1px solid #f1f1f1;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 20px 0;
|
}
|
|
.left-item-body {
|
box-sizing: border-box;
|
padding: 5px;
|
height: 693px;
|
overflow-y: auto;
|
}
|
|
.body-item {
|
background: #70a090;
|
border-radius: 16px;
|
overflow: hidden;
|
margin-bottom: 8px;
|
}
|
|
.body-item.color0 {
|
background: #70a090;
|
}
|
|
.body-item.color1 {
|
background: #ebd476;
|
}
|
|
.body-item.color2 {
|
background: #ff3838;
|
}
|
|
.body-item > div {
|
height: calc(100% - 16px);
|
margin-top: 16px;
|
background: rgba(255, 255, 255, 0.9);
|
padding: 8px 8px 16px;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.search_thing {
|
height: 50px;
|
margin-bottom: 26px;
|
}
|
|
.search_label {
|
width: 120px;
|
font-size: 14px;
|
text-align: left;
|
margin-bottom: 10px;
|
}
|
|
.body-item-name {
|
display: inline-block;
|
height: 22px;
|
width: 60px;
|
border-radius: 10px;
|
line-height: 22px;
|
text-align: center;
|
background: #c0c4cc;
|
color: #fff;
|
font-size: 14px;
|
}
|
|
.body-item-insState {
|
margin-left: 2px;
|
display: inline-block;
|
height: 22px;
|
width: 60px;
|
border-radius: 10px;
|
line-height: 22px;
|
text-align: center;
|
color: #fff;
|
font-size: 14px;
|
}
|
</style>
|
