Merge branch 'dev-shujirizhi' of http://git.elinkit.com.cn:7070/r/epmet-oper-gov into dev-shujirizhi

src/assets/scss/c/config.scss

@@ -11,7 +11,7 @@ $w1: 1200px;
 
 //网站主色 primary color bgcolor
 $c1: #ff4c52; // 红  dd000f
-$c2: #3b7cff;
+$c2: #3e8ef7;
 
 //灰度色 用于字体
 $fc0: #010033;

src/assets/scss/c/function.scss

@@ -87,6 +87,15 @@
 	text-overflow: ellipsis;
 	word-wrap: normal;
 }
+
+// 强制文本换行 多行
+@mixin toeM($num) {
+	display: -webkit-box;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	-webkit-line-clamp: $num;
+	-webkit-box-orient: vertical;
+}
 // 图片居中
 @mixin img_hub {
 	position: absolute;
@@ -206,7 +215,7 @@
 }
 //党员积分排行榜
 @mixin img123 {
-	width:20px;
+	width: 20px;
 	height: 20px;
 	border-radius: 50%;
 	position: absolute;
@@ -258,11 +267,9 @@
 	display: block;
 	z-index: 10;
 	margin-top: 40px;
-	
 }
 @mixin list {
 	list-style-type: none;
 	position: absolute;
 	padding: 0px;
 }
-

src/assets/scss/modules/shujirizhi-notice.scss

@@ -0,0 +1,62 @@
+@import "../c/anime";
+@import "../c/config";
+@import "../c/function";
+
+.m-notice {
+    position: fixed;
+    z-index: 10000;
+    bottom: 0;
+    right: 0;
+    background-color: #fff;
+    box-shadow: 0 0 10px 0 rgba(#000, 0.1);
+    width: 500px;
+    height: 300px;
+    box-sizing: border-box;
+    padding: 25px;
+
+    .header {
+        margin-bottom: 20px;
+        font-size: 24px;
+        font-weight: bold;
+        color: #3e8ef7;
+    }
+    .type {
+        margin-bottom: 10px;
+        font-size: 20px;
+        font-weight: bold;
+        color: #333;
+    }
+    .content {
+        @include toeM(2);
+        margin-bottom: 10px;
+        font-size: 16px;
+        color: #333;
+        line-height: 30px;
+    }
+    .date {
+        margin-bottom: 30px;
+        font-size: 16px;
+        color: #999;
+        line-height: 30px;
+    }
+    .operate {
+        display: flex;
+        justify-content: space-around;
+
+        .btn {
+            box-sizing: border-box;
+            padding: 0 20px;
+            width: 180px;
+            text-align: center;
+            font-size: 20px;
+            color: #3e8ef7;
+            line-height: 40px;
+            cursor: pointer;
+
+            &.z-stress {
+                background-color: #3e8ef7;
+                color: #fff;
+            }
+        }
+    }
+}

src/js/store/index.js

@@ -4,6 +4,7 @@ import cloneDeep from "lodash/cloneDeep";
 import user from "./modules/user";
 import app from "./modules/app";
 import tagsView from "./modules/tagsView";
+import { requestPost } from "@/js/dai/request";
 
 Vue.use(Vuex);
 
@@ -37,7 +38,8 @@ export default new Vuex.Store({
       menuList: [],
       activeName: "",
     },
-
+    tipsList: [],
+    tipsTime: [],
     inIframe: window.self !== window.top,
   },
   modules: {
@@ -52,5 +54,38 @@ export default new Vuex.Store({
         state[key] = cloneDeep(window.SITE_CONFIG["storeState"][key]);
       });
     },
+    SET_TIPS_LIST(state, tipsList) {
+      let _list = state.tipsList
+      state.tipsList = _list.concat(tipsList)
+    },
+    SET_TIPS_TIME(state, time) {
+      state.tipsTime = time
+    }
   },
+  actions: {
+    setTipsList({ commit }, time) {
+      return new Promise(async (resolve, reject) => {
+        const url = '/gov/project/memoAttr/memosToRemind'
+        const params = {
+          remindTime: time || ''
+        }
+        const { data, code, msg } = await requestPost(url, params)
+        if (code === 0) {
+          commit('SET_TIPS_LIST', data)
+          resolve()
+        } else reject(msg)
+      })
+    },
+    setTipsTime({ commit }) {
+      return new Promise(async (resolve, reject) => {
+        const url = '/gov/project/memoAttr/memoTime'
+        
+        const { data, code, msg } = await requestPost(url)
+        if (code === 0) {
+          commit('SET_TIPS_TIME', data)
+          resolve()
+        } else reject(msg)
+      })
+    }
+  }
 });

src/views/main-content.vue

@@ -69,18 +69,53 @@
         <router-view />
       </keep-alive>
     </template>
+
+    <template v-for="(item, index) in $store.state.tipsList">
+      <Tips  :key="item.memoId" 
+      :info="item" 
+      @look="handleLook(item)" @close="handleClose(item, index)" />
+    </template>
+
+    <el-dialog title="提示信息" :visible.sync="dialogFormVisible" :close-on-click-modal="false" append-to-body>
+      <el-form :model="form">
+        <el-form-item label="活动名称" :label-width="formLabelWidth">
+          <el-input v-model="form.name" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="活动区域" :label-width="formLabelWidth">
+          <el-select v-model="form.region" placeholder="请选择活动区域">
+            <el-option label="区域一" value="shanghai"></el-option>
+            <el-option label="区域二" value="beijing"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">取 消</el-button>
+        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
+      </div>
+    </el-dialog>
   </main>
 </template>
 
 <script>
 import { isURL } from "@/utils/validate";
 import Cookie from "js-cookie";
+import Tips from './tips.vue'
+import { requestPost } from "@/js/dai/request";
 export default {
+  components: {
+    Tips
+  },
   data() {
     return {
+      dialogFormVisible: false,
       iframeUrl: "",
       token: "",
       customerId: "",
+      form: {
+
+      },
+      formLabelWidth: '120px',
+      tipsList: []
     };
   },
   created() {
@@ -89,6 +124,8 @@ export default {
     // })
     this.token = localStorage.getItem("token");
     this.customerId = localStorage.getItem("customerId");
+    
+    this.loopTips()
   },
   methods: {
     changeCustomerName(customerName) {
@@ -174,6 +211,60 @@ export default {
       // }, '*')
       iframe.postMessage({ name: "lalalal" }, "*");
     },
+    loopTips() {
+      this.$store.dispatch('setTipsList')
+      this.$store.dispatch('setTipsTime')
+      // let id = 1
+      // this.timer = setInterval(() => {
+      //   id = id + 1
+      //   if (id == 5) clearInterval(this.timer)
+      //   this.tipsList.push(id)
+      //   console.log('id------0', id)
+      // }, 1000)
+    },
+    async closeTips(memoId) {
+      const url = '/gov/project/memoAttr/setReaded'
+      const params = {
+        memoId
+      }
+      const { data, code, msg } = await requestPost(url, params)
+      if (code != 0) this.$message.error(msg)
+    },
+    async getInfo(item) {
+      const urls = {
+        work_diary: '/gov/project/memoWorkDiary',
+        concern: '/gov/project/memoConcern',
+        difficulty: '/gov/project/memoDifficulty/detail'
+      }
+      const params = {
+        id: item.memoId,
+        readFlag: 0
+      }
+      const { data, code, msg } = await requestPost(urls[item.type], params)
+      if (code == 0) {
+        this.form = { ...data }
+      } else this.$message.error(msg)
+    },
+    handleClose(item, index) {
+      console.log('close-----', item)
+      this.$store.state.tipsList.splice(index, 1)
+      this.closeTips(item.memoId)
+    },
+    async handleLook(item) {
+      console.log('look-----', item)
+      await this.getInfo(item)
+      this.dialogFormVisible = true
+      
+    }
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.aui-content {
+  position: relative;
+  // height: calc(100vh -50px) !important;
+  overflow: hidden;
+}
+
+</style>

src/views/main.vue

@@ -1,24 +1,30 @@
 <template>
-  <div v-loading.fullscreen.lock="loading"
+  <div
-       :element-loading-text="$t('loading')"
+    v-loading.fullscreen.lock="loading"
-       :class="[
+    :element-loading-text="$t('loading')"
+    :class="[
       'aui-wrapper',
       { 'aui-sidebar--fold': $store.state.sidebarFold },
       {
         'aui-sidebar--noside':
-          $store.state.sidebarActiveSubMenuList.length == 0 || $store.state.inIframe,
+          $store.state.sidebarActiveSubMenuList.length == 0 ||
+          $store.state.inIframe,
       },
       { 'z-iframe': $store.state.inIframe },
-    ]">
+    ]"
+  >
     <template v-if="!loading">
-      <main-navbar ref="ref_navbar"
+      <main-navbar ref="ref_navbar" v-if="!$store.state.inIframe" />
-                   v-if="!$store.state.inIframe" />
       <main-sidebar v-if="!$store.state.inIframe" />
       <div class="aui-content__wrapper">
-        <main-content v-if="!$store.state.contentIsNeedRefresh"
+        <main-content
-                      @changeCustomerName="changeCustomerName" />
+          v-if="!$store.state.contentIsNeedRefresh"
+          @changeCustomerName="changeCustomerName"
+        />
       </div>
       <main-theme-tools v-if="!$store.state.inIframe" />
+
+      <!-- <secretary-log-notice v-if="!$store.state.inIframe" /> -->
     </template>
   </div>
 </template>
@@ -28,16 +34,17 @@ import MainNavbar from "./main-navbar";
 import MainSidebar from "./main-sidebar";
 import MainContent from "./main-content";
 import MainThemeTools from "./main-theme-tools";
+import SecretaryLogNotice from "./modules/secretaryLog/cpts/notice";
 import debounce from "lodash/debounce";
 import { mapGetters } from "vuex";
 import nextTick from "dai-js/tools/nextTick";
 import { requestPost } from "@/js/dai/request";
 
 export default {
-  provide () {
+  provide() {
     return {
       // 刷新
-      refresh () {
+      refresh() {
         this.$store.state.contentIsNeedRefresh = true;
         this.$nextTick(() => {
           this.$store.state.contentIsNeedRefresh = false;
@@ -45,7 +52,7 @@ export default {
       },
     };
   },
-  data () {
+  data() {
     return {
       loading: true,
       userType: localStorage.getItem("userType"),
@@ -56,12 +63,13 @@ export default {
     MainSidebar,
     MainContent,
     MainThemeTools,
+    SecretaryLogNotice,
   },
 
   watch: {
     $route: "routeHandle",
   },
-  async created () {
+  async created() {
     this.$store.state.sidebarMenuList = window.SITE_CONFIG["menuList"];
     console.log(this.$store.state.sidebarMenuList);
 
@@ -73,11 +81,11 @@ export default {
   },
   computed: {},
   methods: {
-    changeCustomerName (customerName) {
+    changeCustomerName(customerName) {
       this.$refs["ref_navbar"].changeCustomerName(customerName);
     },
     // 窗口改变大小
-    windowResizeHandle () {
+    windowResizeHandle() {
       this.$store.state.sidebarFold =
         document.documentElement["clientWidth"] <= 992 || false;
       window.addEventListener(
@@ -89,7 +97,7 @@ export default {
       );
     },
     // 路由, 监听
-    routeHandle (route) {
+    routeHandle(route) {
       if (!route.meta.isTab) {
         return false;
       }
@@ -112,7 +120,7 @@ export default {
       this.$store.state.contentTabsActiveName = tab.name;
       this.syncLevelOneMenuActive(tab.menuId);
     },
-    async syncLevelOneMenuActive (menuId) {
+    async syncLevelOneMenuActive(menuId) {
       await nextTick();
       console.log(
         "*******************************",
@@ -135,7 +143,7 @@ export default {
         idx !== -1 ? this.$store.state.sidebarMenuList[idx].children : [];
     },
     // 获取当前管理员信息
-    async getWorkUserInfo () {
+    async getWorkUserInfo() {
       const url = "/epmetuser/customerstaff/staffbasicinfo";
       let params = {};
       const { data, code, msg } = await requestPost(url, params);

src/views/modules/base/resi.vue

@@ -12,11 +12,12 @@
                    @click="handleAdd">新增</el-button>
         <el-button class="diy-button--export"
                    size="small"
-                   @click="handleExportModule('room')">下载人口模板</el-button>
+                   @click="handleExportModule('room')">下载模板</el-button>
         <el-upload ref="upload"
                    class="upload-demo"
                    action="uploadUlr"
                    :limit="1"
+                   :accept="'.xls,xlsx'"
                    :with-credentials="true"
                    :show-file-list="false"
                    :auto-upload="true"
@@ -62,7 +63,8 @@
                          align="center"
                          :fixed="item.columnName == 'NAME' ? 'left' : false"
                          :show-overflow-tooltip="true"
-                         :width="item.itemType === 'radio' ? computedWidth(item.label) : 180">
+                         >
+                         <!-- :width="item.itemType === 'radio' ? computedWidth(item.label) : 180" -->
           <template slot-scope="scope">
             <a v-if="item.columnName == 'NAME'"
                class="name-a"
@@ -277,7 +279,7 @@ export default {
     return {
       exportBtn: false,
       exportBtnTitle: '导出',
-      importBtnTitle: '导入人员数据',
+      importBtnTitle: '导入',
       importLoading: false,
       rowVisible: false,
       tableLoading: false,
@@ -659,7 +661,7 @@ export default {
       //     this.$message.error('导入失败')
       //   })
       this.importLoading = false
-      this.importBtnTitle = '导入人员数据'
+      this.importBtnTitle = '导入'
       this.$refs.upload.clearFiles()
     },
     handleClick (tab, event) {

src/views/modules/secretaryLog/cpts/notice.vue

@@ -1,6 +1,13 @@
 <template>
-  <div>
+  <div class="m-notice a-fade-in-up" v-if="displayed && list.length > 0">
-    弹窗提示
+    <div class="header">通知提醒</div>
+    <div class="type">{{ list[0].typeName }}</div>
+    <div class="content">{{ list[0].content }}</div>
+    <div class="date">{{ list[0].remindTime }}</div>
+    <div class="operate">
+      <div class="btn" @click="read">我知道了</div>
+      <div class="btn z-stress" @click="checkInfo">查看详情</div>
+    </div>
   </div>
 </template>
 
@@ -9,320 +16,87 @@ import { requestPost } from "@/js/dai/request2";
 import nextTick from "dai-js/tools/nextTick";
 
 export default {
-  components: {  },
+  components: {},
   data() {
     return {
-      agencyId: "",
+      displayed: false,
-
+
-      tableData: [],
+      lastTime: 0,
-
+
-      currentIndex: 0,
+      list: [
+        {
+          memoId: "1",
+          type: "work_diary",
+          typeName: "工作日志",
+          content:
+            "提醒内容提醒内容提醒内容提醒内容提醒内容提醒内容提醒内容提醒内容提醒内容提醒内容提醒内容提醒内容提醒内容提醒内容提醒内容提醒内容提醒内容提醒内容提醒内容提醒内容",
+          remindTime: "2022-02-22 22:22",
+        },
+      ],
     };
   },
-  computed: {
+  computed: {},
-  },
   watch: {
-    currentIndex() {
+    currentIndex() {},
-    },
   },
   async mounted() {
-    await this.loadAgency();
+    this.poll();
-    await this.getTableData();
   },
   methods: {
-    async handleDel() {
+    async poll() {
-      if (!confirm("删除后不可恢复，确定删除？")) return;
+      let nowTime = new Date().getTime();
-
+      if (nowTime - this.lastTime > 60 * 1000) {
-      const item = this.tableData[this.currentIndex];
+        this.lastTime = nowTime;
-      const url = "/gov/org/icpartyservicecenter/del";
+        this.getList();
-
+      }
-      const { data, code, msg } = await requestPost(url, [
+      await nextTick(1000);
-        item.partyServiceCenterId,
+      this.poll();
-      ]);
+    },
 
-      if (code === 0) {
+    checkInfo() {
-        this.$message.success("删除成功！");
+      const { memoId, type } = this.list[0];
-        this.getTableData();
+      if (type == "work_diary") {
+        this.$router.push({
+          path: `/main/visual-basicinfo-people/${uid}`,
+        });
+      } else if (type == "concern") {
+      } else if (type == "difficulty") {
       }
+
+      this.read();
     },
 
-    async getTableData() {
+    async read() {
-      const oldLen = this.tableData.length;
+      const item = this.list[0];
-      const url = "/gov/org/icpartyservicecenter/partyservicecenterlist";
+      const url = "/gov/project/memoAttr/setReaded";
+
       const { data, code, msg } = await requestPost(url, {
-        orgId: this.agencyId,
+        memoId: item.memoId,
-        orgType: "agency",
       });
-      if (code === 0) {
-        console.log("列表请求成功！！！！！！！！！！！！！！");
 
-        this.tableData = data;
+      if (code === 0) {
-
+        // this.$message.success("删除成功！");
-        if (data.length > 0 && oldLen == 0) {
+        this.displayed = false;
-          await nextTick(100);
+        this.getList();
-          this.initMap();
-          this.setMap();
-        }
       }
     },
 
-    //加载组织
+    async getList() {
-    async loadAgency() {
+      const url = "/gov/project/memoAttr/memosToRemind";
-      const url = "/epmetuser/customerstaff/staffbasicinfo";
+      const { data, code, msg } = await requestPost(url, {});
-      let params = {};
-
-      const { data, code, msg } = await requestPost(url, params);
-
       if (code === 0) {
-        this.agencyId = data.agencyId;
+        console.log("列表请求成功！！！！！！！！！！！！！！");
+        this.displayed = true;
+        this.lastTime = new Date().getTime();
+        // this.list = data;
       }
     },
   },
 };
 </script>
 
-<style lang="scss" scoped>
+<style
-.m-hint {
+  lang="scss"
-  display: flex;
+  src="@/assets/scss/modules/shujirizhi-notice.scss"
-  justify-content: center;
+  scoped
-  text-align: center;
+></style>
-}
-
-.m-center {
-  display: flex;
-  .center-left {
-    width: 25%;
-    .list {
-      padding-right: 10px;
-      height: calc(100vh - 210px);
-      overflow-y: auto;
-      &::-webkit-scrollbar {
-        /*滚动条整体样式*/
-        width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
-        height: 1px;
-      }
-      &::-webkit-scrollbar-thumb {
-        /*滚动条里面小方块*/
-        border-radius: 8px;
-        box-shadow: inset 0 0 5px rgba(#333, 0.1);
-        background: linear-gradient(270deg, #eee, #aaa);
-      }
-      &::-webkit-scrollbar-track {
-        /*滚动条里面轨道*/
-        box-shadow: inset 0 0 5px rgba(#333, 0.1);
-        border-radius: 8px;
-        background: #eee;
-      }
-
-      .item {
-        position: relative;
-        box-sizing: border-box;
-        margin-bottom: 10px;
-        border: 2px solid #6aa;
-        border-radius: 4px;
-        padding: 13px 13px;
-        background-color: rgba(#6aa, 0.1);
-        cursor: pointer;
-
-        &.z-on {
-          background-color: #ffffff;
-          box-shadow: 0 0 10px #6aa;
-        }
-
-        .item-btns {
-          position: absolute;
-          top: 5px;
-          right: 5px;
-          // width: 120px;
-
-          a {
-            display: inline-block;
-            margin-left: 1px;
-            font-size: 14px;
-            color: rgb(235, 192, 4);
-            width: 40px;
-            line-height: 30px;
-            text-align: center;
-            cursor: pointer;
-            &:nth-child(2) {
-              color: #aaa;
-              &:hover {
-                // text-decoration: underline;
-                color: #666;
-              }
-            }
-
-            &:hover {
-              // text-decoration: underline;
-              color: rgb(250, 208, 23);
-            }
-          }
-        }
-
-        .item-name {
-          font-size: 16px;
-          font-weight: bold;
-          margin-bottom: 10px;
-        }
-        .item-prop {
-          display: flex;
-          margin-bottom: 8px;
-          font-size: 14px;
-
-          .prop-field {
-            width: 70px;
-          }
-          .prop-value {
-            margin-left: 5px;
-            p {
-              margin: 0;
-              margin-bottom: 5px;
-            }
-          }
-        }
-      }
-    }
-  }
-  .center-right {
-    margin-left: auto;
-    width: 72%;
-    .operate {
-      margin-bottom: 10px;
-      text-align: right;
-    }
-    .div_map {
-      margin-bottom: 10px;
-      height: 300px;
-    }
-  }
-}
-.tabs-other-info {
-  .el-tabs__item {
-    // width: 50px;
-    height: 20px;
-    box-sizing: border-box;
-    margin-right: 7px;
-    padding: 0 10px !important;
-    font-size: 8px;
-    font-weight: 500;
-    color: #666666;
-    line-height: 20px;
-    background: #ebecf1;
-    border-radius: 2px;
-  }
-  .el-tabs__nav-wrap::after,
-  .el-tabs__active-bar {
-    display: none;
-  }
-  .el-tabs__nav-next,
-  .el-tabs__nav-prev {
-    line-height: 20px;
-  }
-}
-
-.resi-card-table {
-  // margin-top: 20px;
-}
-.resi-row-btn {
-  margin-bottom: 13px;
-  .upload-btn {
-    display: inline-block;
-    margin: 0 10px;
-  }
-}
-.resi-other {
-  width: 100%;
-  display: flex;
-  .resi-other-title {
-    width: 100px;
-    box-sizing: border-box;
-    margin-bottom: 10px;
-    // padding: 6px 12px 0 0;
-    font-size: 16px;
-    font-weight: 500;
-    color: #333;
-    text-align: center;
-  }
-  .tabs-other-info {
-    // padding-left: 60px;
-  }
-}
-
-.resi-btns {
-  margin-top: 20px;
-  text-align: center;
-}
-
-.resi-container .resi-card {
-  position: relative;
-  overflow: visible;
-}
-.resi-down {
-  position: absolute;
-  left: 50%;
-  bottom: -10px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 46px;
-  height: 12px;
-  box-sizing: border-box;
-  margin-left: -23rpx;
-  cursor: pointer;
-  background: #ffffff;
-  border-radius: 0 0 10px 10px;
-  img {
-    display: block;
-  }
-}
-.resi-row-box {
-  // height: 104px;
-  overflow: hidden;
-  transition: height 0.5s;
-}
-.resi-row-more {
-  height: max-content;
-  transition: height 0.5s;
-}
-.resi-row {
-  margin-bottom: 20px;
-}
-.resi-search {
-  .el-col {
-    text-align: right;
-  }
-}
-.resi-cell {
-  display: flex;
-  align-items: center;
-  .resi-cell-label {
-    width: 70px;
-    box-sizing: border-box;
-    margin-right: 15px;
-    text-align: right;
-    // line-height: 32;
-  }
-  .resi-cell-value-radio {
-    display: flex;
-    align-items: center;
-    min-height: 32px;
-  }
-  .resi-cell-input {
-    width: 180px;
-  }
-  .resi-cell-select {
-    width: 180px;
-    box-sizing: border-box;
-    margin-right: 10px;
-    &-middle {
-      width: 130px;
-    }
-    &-small {
-      width: 88px;
-    }
-  }
-  .resi-cell-select:last-child {
-    margin-right: 0;
-  }
-}
-</style>

src/views/tips.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="msg-tips" :class="showTips ? 'show-tips' : 'hide-tips'">
+    <el-card class="tips-card">
+      <div class="tips-wr">
+        <div class="tips-wr-title">通知提醒</div>
+        <div class="tips-wr-name">{{ info.typeName }}</div>
+        <div class="tips-wr-desc">{{ info.content }}</div>
+        <div class="tips-wr-time">{{ info.remindTime }}</div>
+        <div class="tips-btn">
+          <el-button type="text" size="small" @click="handleClose">我知道了</el-button>
+          <el-button class="diy-button--search" size="small" @click="handleLook">查看详情</el-button>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    show: {
+      type: Boolean,
+      default: true
+    },
+    info: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      showTips: false
+    }
+  },
+  created() {
+    this.showTips = this.show
+  },
+  methods: {
+    handleClose() {
+      this.showTips = false
+      this.$emit('close')
+    },
+    handleLook() {
+      this.$emit('look')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.msg-tips {
+  position: fixed;
+  right: 0;
+  z-index: 999;
+  transition: bottom .5s;
+  .tips-card {
+    width: 400px;
+    height: 200px;
+    background: #fff;
+  }
+  .tips-wr-title {
+    font-size: 16px;
+    color: #3E8EF7;
+  }
+  .tips-wr-name {
+    margin-top: 10px;
+    padding-left: 20px;
+    font-weight: bold;
+  }
+  .tips-wr-desc {
+    width: 100%;
+    height: 33px;
+    margin-top: 10px;
+    padding-left: 20px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+
+  }
+  .tips-wr-time {
+    margin-top: 10px;
+    padding-left: 20px;
+  }
+  .tips-btn {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+    width: 100%;
+    box-sizing: border-box;
+    margin-top: 10px;
+    padding: 0 20px;
+    text-align: center;
+  }
+}
+.hide-tips {
+  bottom: -220px;
+  
+}
+.show-tips {
+  bottom: 0px;
+}
+</style>