|
|
@@ -0,0 +1,619 @@
|
|
|
+<template>
|
|
|
+ <div class="box-container">
|
|
|
+ <div class="box-container-top">
|
|
|
+ <el-card class="card-cell middle-cell">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>数据概览</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-cell-content">
|
|
|
+ <div class="card-cell-value">
|
|
|
+ <div class="img-box img1-url"></div>
|
|
|
+ <div class="text-box">
|
|
|
+ <span>64</span>
|
|
|
+ <span>我的项目</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-cell-value">
|
|
|
+ <div class="img-box img2-url"></div>
|
|
|
+ <div class="text-box">
|
|
|
+ <span>15</span>
|
|
|
+ <span>我的任务</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-cell-value">
|
|
|
+ <div class="img-box img3-url"></div>
|
|
|
+ <div class="text-box">
|
|
|
+ <span>22</span>
|
|
|
+ <span>我的工单</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-cell-value">
|
|
|
+ <div class="img-box img4-url"></div>
|
|
|
+ <div class="text-box">
|
|
|
+ <span>1000</span>
|
|
|
+ <span>我的绩效</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <el-card class="card-cell middle-cell">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>个人信息</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-cell-info">
|
|
|
+ <div class="card-cell-value">
|
|
|
+ <div>
|
|
|
+ <el-avatar shape="square" :size="80" src="https://empty" @error="errorHandler">
|
|
|
+ <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
|
|
|
+ </el-avatar>
|
|
|
+ </div>
|
|
|
+ <div class="text-box">
|
|
|
+ <span>{{ user.info.name }}</span>
|
|
|
+ <span>{{ user.info.groupName }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="card-cell-date">
|
|
|
+ <!-- <span style="color: #7fa7ce">{{ date }}</span>-->
|
|
|
+ <span>{{ time }}</span>
|
|
|
+ <span>{{ week }} </span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div class="box-container-middle">
|
|
|
+ <el-card class="card-cell middle-cell">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>流程待办</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <ele-pro-table
|
|
|
+ ref="table"
|
|
|
+ :columns="columns"
|
|
|
+ :need-page="false"
|
|
|
+ :toolkit="[]"
|
|
|
+ style="padding: 10px"
|
|
|
+ height="calc(38vh)"
|
|
|
+ :datasource="datasource"
|
|
|
+ cache-key="systemHomeTable5"
|
|
|
+ >
|
|
|
+ <template v-slot:status="{ row }">
|
|
|
+ <el-tag type="success" v-if="row.suspensionState === 1">激活</el-tag>
|
|
|
+ <el-tag type="warning" v-if="row.suspensionState === 2">挂起</el-tag>
|
|
|
+ </template>
|
|
|
+ <template v-slot:name="{ row }">
|
|
|
+ <el-link
|
|
|
+ type="primary"
|
|
|
+ :underline="false"
|
|
|
+ @click="handleAudit('', row)"
|
|
|
+ >
|
|
|
+ {{ row.name }}
|
|
|
+ </el-link
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <!-- 操作列 -->
|
|
|
+ <template v-slot:action="{ row }">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="handleAudit('audit', row)"
|
|
|
+ >处理
|
|
|
+ </el-button
|
|
|
+ >
|
|
|
+ <!-- <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="openEdit('upDate', row)"
|
|
|
+ >待办详情</el-button
|
|
|
+ > -->
|
|
|
+ </template>
|
|
|
+ </ele-pro-table>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ <el-card class="card-cell middle-cell">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>消息提醒</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <vue-seamless-scroll class="scroll-box"
|
|
|
+ v-if="messageScrollList.length"
|
|
|
+ :data="messageScrollList"
|
|
|
+ :class-option="defineScroll">
|
|
|
+ <div v-for="o in messageScrollList" :key="o.id" class="scroll-box-content">
|
|
|
+ <el-timeline-item :hide-timestamp="false">
|
|
|
+ <template slot="dot">
|
|
|
+ <span class="scroll-box-content-dot"></span>
|
|
|
+ </template>
|
|
|
+ <div class="scroll-box-content-item">
|
|
|
+ <span class="item-date">{{ o.createTime }}</span>
|
|
|
+ <span class="item-text" :title="`${ o.templateNickname + ':'+o.templateContent}`">{{ o.templateNickname + ':' + o.templateContent }}</span>
|
|
|
+ </div>
|
|
|
+ </el-timeline-item>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </vue-seamless-scroll>
|
|
|
+ <el-empty v-else description="暂无"></el-empty>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <div class="box-container-bottom">
|
|
|
+ <el-card class="card-cell middle-cell">
|
|
|
+ <div slot="header" class="clearfix">
|
|
|
+ <span>常用功能</span>
|
|
|
+ </div>
|
|
|
+ <div class="card-cell-content">
|
|
|
+ <div v-for="item in commonList" :key="item.id" class="card-cell-content-div">
|
|
|
+ <i :class="item.icon||'el-icon-menu'"></i>
|
|
|
+ <span>{{item.name}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
+ <handleTask ref="handleTaskRef" @reload="reload"></handleTask>
|
|
|
+ <detail ref="detailRef"></detail>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+
|
|
|
+
|
|
|
+import {getTodoTaskPage, notifyMessagePageAPI} from "@/api/bpm/task";
|
|
|
+import {mapGetters} from "vuex";
|
|
|
+import detail from "@/views/bpm/processInstance/detail.vue";
|
|
|
+import handleTask from "@/views/bpm/handleTask/index.vue";
|
|
|
+import {deepClone} from "ele-admin/lib/utils/core";
|
|
|
+import vueSeamlessScroll from 'vue-seamless-scroll'
|
|
|
+export default {
|
|
|
+ name: "index",
|
|
|
+ components: {handleTask, detail,vueSeamlessScroll},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ time: '',
|
|
|
+ date: '',
|
|
|
+ week: '',
|
|
|
+ updateTimer: null,
|
|
|
+ messageScrollList: [],
|
|
|
+ defineScroll: {
|
|
|
+ step: 0.2, // 数值越大速度滚动越快
|
|
|
+ limitMoveNum: 5, // 开始无缝滚动的数据量 this.dataList.length
|
|
|
+ hoverStop: true, // 是否开启鼠标悬停stop
|
|
|
+ direction: 1, // 0向下 1向上 2向左 3向右
|
|
|
+ openWatch: true, // 开启数据实时监控刷新dom
|
|
|
+ singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
|
+ singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
|
+ waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
|
|
+ },
|
|
|
+ commonList: [
|
|
|
+ {
|
|
|
+ name: '常用分类',
|
|
|
+ id: '1',
|
|
|
+ icon: '',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '编辑',
|
|
|
+ id: '-1',
|
|
|
+ icon: 'el-icon-edit',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ columnKey: 'index',
|
|
|
+ label: '序号',
|
|
|
+ type: 'index',
|
|
|
+ width: 55,
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ fixed: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'processInstance.name',
|
|
|
+ label: '流程名称',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 200
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'name',
|
|
|
+ label: '任务名称',
|
|
|
+ align: 'center',
|
|
|
+ slot: 'name',
|
|
|
+
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 200
|
|
|
+ },
|
|
|
+ {
|
|
|
+ prop: 'processInstance.startUserNickname',
|
|
|
+ label: '流程发起人',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 200
|
|
|
+ },
|
|
|
+ // {
|
|
|
+ // prop: 'suspensionState',
|
|
|
+ // slot: 'suspensionState',
|
|
|
+ // label: '状态',
|
|
|
+ // align: 'center',
|
|
|
+ // showOverflowTooltip: true,
|
|
|
+ // minWidth: 200
|
|
|
+ // },
|
|
|
+
|
|
|
+ {
|
|
|
+ prop: 'createTime',
|
|
|
+ label: '创建时间',
|
|
|
+ align: 'center',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ minWidth: 180
|
|
|
+ },
|
|
|
+
|
|
|
+ {
|
|
|
+ columnKey: 'action',
|
|
|
+ label: '操作',
|
|
|
+ width: 230,
|
|
|
+ align: 'center',
|
|
|
+ resizable: false,
|
|
|
+ slot: 'action',
|
|
|
+ showOverflowTooltip: true,
|
|
|
+ fixed: 'right'
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters(['user'])
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ console.log(this.user);
|
|
|
+ // window.isFullscreen = false
|
|
|
+ this.updateTimer = setInterval(this.updateTime, 1000);
|
|
|
+ this.getMessageList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /* 表格数据源 */
|
|
|
+ datasource({page, limit, where, order}) {
|
|
|
+ return getTodoTaskPage({
|
|
|
+ pageNo: page,
|
|
|
+ pageSize: limit,
|
|
|
+ ...this.params
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async getMessageList() {
|
|
|
+ const { list} = await notifyMessagePageAPI({
|
|
|
+ pageNum: 1,
|
|
|
+ size: 9999,
|
|
|
+ userId: this.user.info.userId
|
|
|
+ });
|
|
|
+ this.messageScrollList = deepClone(list);
|
|
|
+
|
|
|
+ },
|
|
|
+ errorHandler(err, vm) {
|
|
|
+ console.log("图片加载失败");
|
|
|
+ },
|
|
|
+ //实时更新日期
|
|
|
+ updateTime() {
|
|
|
+ let now = new Date();
|
|
|
+ let hours = now.getHours();
|
|
|
+ let minutes = now.getMinutes();
|
|
|
+ let seconds = now.getSeconds();
|
|
|
+ this.time =
|
|
|
+ hours.toString().padStart(2, '0') +
|
|
|
+ ':' +
|
|
|
+ minutes.toString().padStart(2, '0') +
|
|
|
+ ':' +
|
|
|
+ seconds.toString().padStart(2, '0');
|
|
|
+
|
|
|
+ let year = now.getFullYear();
|
|
|
+ let month = now.getMonth() + 1;
|
|
|
+ let day = now.getDate();
|
|
|
+ this.date = year + '年' + month + '月' + day + '日';
|
|
|
+
|
|
|
+ let weekInfo = {
|
|
|
+ 1: '一',
|
|
|
+ 2: '二',
|
|
|
+ 3: '三',
|
|
|
+ 4: '四',
|
|
|
+ 5: '五',
|
|
|
+ 6: '六',
|
|
|
+ 0: '日'
|
|
|
+ };
|
|
|
+ this.week = '星期' + weekInfo[now.getDay()];
|
|
|
+ },
|
|
|
+ /** 处理审批按钮 */
|
|
|
+
|
|
|
+ handleAudit(type, row) {
|
|
|
+
|
|
|
+ if (type == 'audit') {
|
|
|
+ this.$refs.handleTaskRef.open({
|
|
|
+ id: row.processInstance.id,
|
|
|
+ businessId: row.businessId,
|
|
|
+ taskId: row.id,
|
|
|
+ taskDefinitionKey: row.taskDefinitionKey,
|
|
|
+ pcHandleRouter: row.pcHandleRouter,
|
|
|
+ pcViewRouter: row.pcViewRouter
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$refs.detailRef.open(row.processInstance.id);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ /* 刷新表格 */
|
|
|
+ reload(where) {
|
|
|
+ this.$refs.table.reload({page: 1, where});
|
|
|
+ },
|
|
|
+ },
|
|
|
+ deactivated() {
|
|
|
+ clearInterval(this.updateTimer);
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.box-container {
|
|
|
+ padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: calc(100vh - 116px);
|
|
|
+ width: calc(100%);
|
|
|
+
|
|
|
+ .box-container-top {
|
|
|
+ height: 22%;
|
|
|
+ width: 100%;
|
|
|
+ min-height: 180px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .middle-cell:nth-child(1) {
|
|
|
+ flex: 0 0 70%;
|
|
|
+
|
|
|
+ .card-cell-content {
|
|
|
+ padding: 0;
|
|
|
+ height: 100%;
|
|
|
+ background: #2e80ee;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ :hover {
|
|
|
+ background: #79aef5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-cell-value {
|
|
|
+ cursor: pointer;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex: 0 0 25%;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .img1-url {
|
|
|
+ background-image: url("@/assets/home-logo-1.png");
|
|
|
+ }
|
|
|
+
|
|
|
+ .img2-url {
|
|
|
+ background-image: url("@/assets/home-logo-2.png");
|
|
|
+ }
|
|
|
+
|
|
|
+ .img3-url {
|
|
|
+ background-image: url("@/assets/home-logo-3.png");
|
|
|
+ }
|
|
|
+
|
|
|
+ .img4-url {
|
|
|
+ background-image: url("@/assets/home-logo-4.png");
|
|
|
+ }
|
|
|
+
|
|
|
+ .img-box {
|
|
|
+ width: 60px;
|
|
|
+ height: 60px;
|
|
|
+ position: relative;
|
|
|
+ background-size: contain;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ }
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ height: 70px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ color: #ffffff;
|
|
|
+ padding: 0 10px;
|
|
|
+
|
|
|
+ :nth-child(1) {
|
|
|
+ font-size: 1.5vw;
|
|
|
+ font-family: fantasy;
|
|
|
+ }
|
|
|
+
|
|
|
+ :nth-child(2) {
|
|
|
+ font-size: 1vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .middle-cell:nth-child(2) {
|
|
|
+ flex: 0 0 29.2%;
|
|
|
+
|
|
|
+ .card-cell-info {
|
|
|
+ padding: 0 10px;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ .card-cell-value {
|
|
|
+ display: flex;
|
|
|
+ height: 80px;
|
|
|
+
|
|
|
+ .text-box {
|
|
|
+ margin: 0 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ font-size: 0.8vw;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-cell-date {
|
|
|
+ height: 80px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ color: #404446;
|
|
|
+ font-size: 0.8vw;
|
|
|
+ margin: 0 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-container-middle {
|
|
|
+ margin: 10px 0;
|
|
|
+ height: 63%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ min-height: 280px;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .middle-cell:nth-child(1) {
|
|
|
+ flex: 0 0 70%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .middle-cell:nth-child(2) {
|
|
|
+ flex: 0 0 29.2%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-container-bottom {
|
|
|
+ height: 10%;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ min-height: 150px;
|
|
|
+ min-width: 400px;
|
|
|
+ .card-cell-content{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ flex-wrap: nowrap;
|
|
|
+ align-content: center;
|
|
|
+ height: 100%;
|
|
|
+ overflow-x: auto;
|
|
|
+ padding: 0 10px;
|
|
|
+
|
|
|
+ .card-cell-content-div {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ height: 80%;
|
|
|
+ border: 1px solid #e3e5e4;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ flex: 0 0 5.5%;
|
|
|
+ padding: 8px 0;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin-right: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ background: #dee4e9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card-cell-content-div i{
|
|
|
+ font-size: 2vw;
|
|
|
+ }
|
|
|
+ .card-cell-content-div span {
|
|
|
+ letter-spacing: 2px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .middle-cell {
|
|
|
+ flex: 0 0 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.el-card + .el-card {
|
|
|
+ margin-top: 0;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-card__header {
|
|
|
+ padding: 10px !important;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-card__body {
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+.scroll-box {
|
|
|
+ height: 80%;
|
|
|
+ width: 100%;
|
|
|
+ padding: 25px 0 0 0;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .scroll-box-content {
|
|
|
+ height: 80%;
|
|
|
+ width: 100%;
|
|
|
+ position: relative;
|
|
|
+ left: 10px;
|
|
|
+
|
|
|
+ .scroll-box-content-dot {
|
|
|
+ width: 10px;
|
|
|
+ height: 10px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 15px;
|
|
|
+ border: 2px solid #2D80EE;
|
|
|
+ }
|
|
|
+
|
|
|
+ .scroll-box-content-item {
|
|
|
+ margin-top: 5px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: flex-start;
|
|
|
+
|
|
|
+ .item-date {
|
|
|
+ width: 30%;
|
|
|
+ color: #979C9E;
|
|
|
+ font-size: 0.7vw;
|
|
|
+ line-height: 16px;
|
|
|
+ display: inline-block;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item-text {
|
|
|
+ width: 80%;
|
|
|
+ color: #555555;
|
|
|
+ font-size: 0.8vw;
|
|
|
+
|
|
|
+ line-height: 16px;
|
|
|
+ white-space: nowrap;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ margin: 5px 0 0 0px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.el-timeline-item {
|
|
|
+ list-style-type: none;
|
|
|
+ line-height: 19px;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.el-timeline-item__wrapper {
|
|
|
+ padding-left: 17px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-empty {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+</style>
|
