公告栏 相关UI

src/pages/dhb/dhb_mtrlinfo.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="setting">
+    <!-- 原有页面上半部分 -->
+    <div style="text-align: center;">
+      <img src="../../assets/dhb_top.jpg" style="display: inline-block;max-width:100%;"> </img>
+    </div>
+
+    <!-- 本次新增开发部分 -->
+    <div style="margin-bottom:15px">
+      <div class="dhb_item_text">
+        <div class="dhb_item_name">选择报价或订货历史</div>
+        <div class="dhb_item_right">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-iconfontjiantou2"></use>
+          </svg>
+        </div>
+      </div>
+
+<!-- 定制需求申请报价,根据客户属性决定是否显示 -->
+       <div class="dhb_item_text" style="margin-top:10px">
+        <div class="dhb_item_name">定制需求申请报价</div>
+        <div class="dhb_item_right">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-iconfontjiantou2"></use>
+          </svg>
+        </div>
+      </div>     
+    </div>
+
+    <!-- 原有页面下半部分 -->
+    <div style="text-align: center;">
+      <img src="../../assets/dhb_bottom.jpg" style="display: inline-block;max-width:100%;"> </img>
+    </div>
+
+  </div>
+</template>
+<script>
+  export default {
+    name: 'dhb_mtrlinfo'
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #F4F4F4;
+    font-family: "微软雅黑";
+  }
+
+  .dhb_item_text {
+    display: flex;
+    flex: 0 0 78%;
+    height:36px;
+    background-color: #ffffff;
+    align-items:center;
+    font-weight: 500 
+  }
+
+  .dhb_item_name {
+    margin: 0 0 0 15px;
+  }
+
+  .dhb_item_right {
+    color: #9b9b9b;
+    font-size: 17px;
+    position: absolute;
+    right: 16px;
+  }
+
+</style>

src/pages/gonggao.vue

@@ -0,0 +1,227 @@
+<template>
+  <div>
+    <div class="topbar">
+      <div class="topbar_left">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-fanhui"></use>
+        </svg>
+      </div>
+      <div class="topbar_middle">公告</div>
+      <div class="topbar_right">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-wentibuchong"></use>
+        </svg>
+      </div>
+    </div>
+
+    <div id="content">
+      <!-- 搜索栏 -->
+      <div class="order_scan">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-sousuo"></use>
+        </svg>
+        快速搜索关键字
+      </div>
+
+      <!-- 日期 -->
+      <!-- <div style="font-size: 17px;font-weight: bold;padding: 10px 0 0 10px;">9月10日</div> -->
+      <!-- 内容主体 -->
+      <div style="padding: 10px 10px 0 10px;font-size:14px;line-height:19px;">
+
+        <!-- 以下div封装为组件,v-for中调用 -->
+        <div class="arrow_box kindgreen">
+          <div style="font-size:13px;color:#888">
+            <span>2020年2月24日 14:28</span>
+            <span style="margin-left:10px">鲁迅</span></div>
+
+          <div class="order_conner tip_green">全公司</div>
+
+          <div style="margin-top:10px">
+            医护人员即使在隔离病房接触患者，会严格按要求，经科学防护才进入病房开展工作，会经过正确的消毒防护措施和院感防护措施。他们离开病房和医院时，不会携带病毒。医护人员是抗击疫情一线的战士，希望每一位医护人员都能被尊重被善待。
+          </div>
+
+        </div>
+
+        <div class="arrow_box kindblue">
+          <div style="font-size:13px;color:#888">
+            <span>2020年2月23日 10:12</span>
+            <span style="margin-left:10px">鲁迅</span></div>
+
+          <div class="order_conner tip_blue">开发部</div>
+
+          <div style="margin-top:10px">3月份开始实行5天工作制。</div>
+        </div>
+
+
+        <div class="arrow_box kindblue">
+          <div style="font-size:13px;color:#888">
+            <span>2020年2月22日 16:12</span>
+            <span style="margin-left:10px">鲁迅</span></div>
+
+          <div class="order_conner tip_blue">开发部</div>
+
+          <div style="margin-top:10px">由于疫情仍然严峻，下周暂停继续在家办公，直到另行通知。</div>
+        </div>
+
+
+        <div class="arrow_box kindgreen">
+          <div style="font-size:13px;color:#888">
+            <span>2020年2月19日 17:12</span>
+            <span style="margin-left:10px">鲁迅</span></div>
+
+          <div class="order_conner tip_green">全公司</div>
+
+          <div style="margin-top:10px">受疫情影响，2月份工资发放将有所延迟。</div>
+        </div>
+
+
+      </div>
+
+
+
+    </div>
+  </div>
+
+</template>
+
+<script>
+  export default {
+
+  }
+
+</script>
+
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    /* background-color: #fff; */
+    font-family: "微软雅黑";
+    font-size: 15px;
+  }
+
+  .topbar {
+    min-height: 44px;
+    border-bottom: 1px solid #e5e5e5;
+    background: #fff;
+    position: fixed;
+    width: 100%;
+    z-index: 9993;
+    display: flex;
+    font-size: 18px;
+    align-items: center;
+  }
+
+  .topbar_left {
+    /* flex: 0 0 %; */
+    margin-left: 10px;
+  }
+
+  .topbar_middle {
+    text-align: center;
+    flex: 0 0 85%;
+  }
+
+  .topbar_right {
+    /* flex: 0 0 10%; */
+    position: absolute;
+    right: 10px;
+  }
+
+  #content {
+    position: absolute;
+    top: 44px;
+    background-color: #fff;
+    width: 100%;
+    padding-bottom: 60px;
+  }
+
+
+
+  .order_scan {
+    margin: 10px 10px;
+    padding: 8px 10px;
+    /* border: 1px solid #c7c7c7; */
+    background-color: #f7f7f7;
+    color: #bbb;
+    border-radius: 20px;
+  }
+
+  .order_scan_btn {
+    color: #999;
+    font-size: 28px;
+  }
+
+  .arrow_box {
+    position: relative;
+    padding: 5px 5px 5px 10px;
+    /* border-radius: 5px; */
+
+    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
+    background: #fff;
+    margin-bottom: 8px;
+    /* border-bottom: 1px solid #f5f5f5;
+    border-top: 1px solid #f5f5f5;
+    border-right: 1px solid #f5f5f5; */
+  }
+
+  .kindgreen {
+    border-left: 5px solid #8dc026;
+
+  }
+
+
+  .kindblue {
+    border-left: 5px solid #46a4da;
+
+  }
+
+  .kindred {
+    border-left: 5px solid #ff6f61;
+  }
+
+
+  .tip_red {
+    color: #fff;
+    background-color: #fa5a5a
+  }
+
+  .tip_blue {
+    color: #fff;
+    background-color: #46a4da
+  }
+
+  .tip_green {
+    color: #fff;
+    background-color: #8dc026
+  }
+
+  .order_conner {
+    position: absolute;
+    right: 0px;
+    top: 0px;
+    /* color: #888; */
+    font-size: 12px;
+    padding: 4px 10px;
+    /* background-color: #ececec; */
+    line-height: 12px;
+    width: 36px;
+    text-align: center;
+    font-weight: bold;
+  }
+
+  .order_conner_sec {
+    position: absolute;
+    right: 60px;
+    top: 0px;
+    /* color: #888; */
+    font-size: 12px;
+    padding: 4px 10px;
+    /* background-color: #ececec; */
+    line-height: 12px;
+    /* width: 36px; */
+    text-align: center;
+    font-weight: bold;
+  }
+
+</style>

src/pages/gonggao_edit.vue

@@ -0,0 +1,258 @@
+<template>
+  <div>
+    <div class="topbar">
+      <div class="topbar_left">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-fanhui"></use>
+        </svg>
+      </div>
+      <div class="topbar_middle">
+        发布公告
+      </div>
+      <div class="topbar_right">
+        <!-- <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-caidan"></use>
+        </svg> -->
+      </div>
+    </div>
+
+    <div class="taskedit">
+
+      <div class="taskedit_main">
+
+        <div class="taskedit_flex">
+          <div class="taskedit_title">分部</div>
+          <div class="taskedit_item">总部</div>
+
+          <div class="taskedit_pzbtn">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+
+        <div class="taskedit_flex">
+          <div class="taskedit_title">部门</div>
+          <div class="taskedit_item">全公司</div>
+          <div class="taskedit_pzbtn">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+
+        <div class="taskedit_flex">
+          <div class="taskedit_title">公告内容</div>
+          <div class="taskedit_dscrp">
+            <span>关于上班工作，现收集如下信息，请各位同事将以下信息尽快私聊我：
+              姓名、性别、年龄、联系电话、现居住地址、身份证号码、户籍所在地、曾逗留地方（2020.1.15-至今）逗留时间(年/月/日-年/月/日）、目前体温、身体状况评估（良好/欠佳）
+              谢谢！</span>
+          </div>
+        </div>
+
+
+
+        <div class="taskedit_flex">
+          <div class="taskedit_title">有效期</div>
+          <div class="taskedit_item color_sub">开始</div>
+          <div class="taskedit_date">2020年2月24日</div>
+          <div class="taskedit_pzbtn">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+        <div class="taskedit_flex">
+          <div class="taskedit_title"></div>
+          <div class="taskedit_item color_sub">结束</div>
+          <div class="taskedit_date">2020年2月29日</div>
+          <div class="taskedit_pzbtn">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+
+
+
+      </div>
+
+
+
+
+    </div>
+
+    <div class="quote_edit_btn_wrap">
+      <div class="quote_edit_btn">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#icon-tongyi"></use>
+        </svg>
+        确定
+      </div>
+    </div>
+
+  </div>
+</template>
+<script>
+  export default {
+    name: 'gonggaoedit',
+    data() {
+      return {}
+    }
+
+  }
+
+</script>
+<style>
+  body {
+    margin: 0;
+    padding: 0;
+    background-color: #fff;
+    font-family: "微软雅黑";
+    font-size: 15px;
+  }
+
+
+  .topbar {
+    min-height: 44px;
+    border-bottom: 1px solid #e5e5e5;
+    background: #fff;
+    position: fixed;
+    width: 100%;
+    z-index: 9999;
+    display: flex;
+    font-size: 18px;
+    align-items: center;
+  }
+
+  .topbar_left {
+    flex: 0 0 20px;
+    margin-left: 10px;
+  }
+
+  .topbar_middle {
+    /* text-align: center; */
+    padding: 0 0 0 10px;
+    flex: 0 0 89%;
+  }
+
+  .topbar_right {
+    flex: 0 0 20px;
+    position: absolute;
+    right: 10px;
+  }
+
+  .taskedit {
+    position: absolute;
+    top: 44px;
+    width: 100%;
+    margin-bottom: 80px;
+  }
+
+  .taskedit_main {
+    padding: 5px 20px;
+  }
+
+  .taskedit_flex {
+    display: flex;
+    line-height: 45px;
+    align-items: flex-start
+  }
+
+
+  .taskedit_title {
+    font-size: 15px;
+    font-weight: bold;
+    flex: 0 0 60px;
+    text-align: justify;
+    text-align-last: justify;
+  }
+
+
+  .taskedit_item {
+    flex: 0 0 80%;
+    border-bottom: 1px solid #e5e5e5;
+    margin: 0 0 0 10px;
+    color: #777
+  }
+
+  .taskedit_pzbtn {
+    position: absolute;
+    right: 20px;
+    color: #ccc;
+    font-size: 16px;
+  }
+
+  .taskedit_date {
+    position: absolute;
+    right: 40px;
+    color: #777
+  }
+
+  .taskedit_dscrp {
+    padding: 10px;
+    line-height: 20px;
+    border: 1px solid #e5e5e5;
+    border-radius: 5px;
+    margin: 5px 0 5px 10px;
+    height: 300px;
+    color: #777;
+    width: 100%
+  }
+
+  .color_sub {
+    color: #999
+  }
+
+  .quote_edit_btn_wrap {
+    display: flex;
+    position: fixed;
+    bottom: 0;
+    /* background-color: #fc4e2c; */
+    width: 100%;
+    z-index: 9990;
+    align-items: center;
+    justify-content: center;
+    /* padding: 5px 0 2px 0; */
+    box-shadow: 0 -1px 3px #f1f1f1;
+  }
+
+  .quote_edit_btn {
+    /* background-color: #ffb732; */
+    background-color: #fc4e2c;
+    color: #ffffff;
+    font-size: 16px;
+    font-weight: bold;
+    text-align: center;
+    padding: 10px;
+    width: 100%;
+  }
+
+  .taskedit_fjarea {
+    margin: 10px 20px;
+    color: #777
+  }
+
+  .taskedit_fjlist {
+    padding: 0 20px;
+    align-items: center;
+    display: flex;
+    font-size: 15px;
+    height: 30px;
+    line-height: 30px;
+  }
+
+  .taskedit_fjsize {
+    font-size: 15px;
+    color: #aaa;
+    margin-left: 10px;
+  }
+
+  .taskedit_fjdel {
+    font-size: 15px;
+    color: #fc4e2c;
+    position: absolute;
+    right: 20px;
+  }
+
+</style>

src/pages/setting.vue

@@ -32,6 +32,22 @@
         </div>
       </div> -->
 
+      <div class="setting_list_item ">
+        <div class="setting_list_item_icon setting_icon_bg_orange">
+          <svg class="icon" aria-hidden="true">
+            <use xlink:href="#icon-qrcode-scan"></use>
+          </svg>
+        </div>
+        <div class="setting_list_item_text setting_list_item_border">
+          <div class="setting_list_item_name">二维码名片</div>
+          <div class="setting_list_item_right">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-iconfontjiantou2"></use>
+            </svg>
+          </div>
+        </div>
+      </div>
+
       <div class="setting_list_item ">
         <div class="setting_list_item_icon setting_icon_bg_blue">
           <svg class="icon" aria-hidden="true">

src/pages/task.vue

@@ -18,16 +18,68 @@
       </div>
     </div> -->
 
+    <!-- 最新公文弹窗 -->
+    <div v-if="ifreport==1">
+      <div
+        style="    height: 100%;width: 100%;background-color: #000;opacity: 0.48;position: fixed;top: 0px;z-index: 9998;">
+      </div>
+      <div style="z-index: 9999;position: fixed;bottom: 0px;height: 100%;width: 100%;font-size:14px;">
+
+        <div style="width:100%;margin: 20% auto;height: 100%;    border-radius: 15px;overflow:hidden;">
+
+
+          <div @click="ifreport_shift"
+            style="position: relative;left:88%;top:40px;background-color:#fc4f4f;color:#fff;font-size:12px;width:20px;height:20px;line-height:20px;text-align: center;border-radius: 50%;">
+            <svg class="icon" aria-hidden="true">
+              <use xlink:href="#icon-guanbi"></use>
+            </svg>
+          </div>
+
+          <div style="display:flex;">
+            <div style="font-size:25px;font-weight:bold;color:#fff;margin:10px auto;">
+              最新公告
+            </div>
+          </div>
+
+          <div
+            style="background-color:rgba(255, 255, 255, 1);margin: 0 auto;width:95%;height:60%;border-radius: 15px;overflow: auto;box-shadow: 0 0px 7px rgba(0, 0, 0, 0.2);">
+            <div style="margin:15px;padding-bottom:15px;border-bottom: 1px dashed #e5e5e5;">
+              <div style="font-size:16px">全公司同事：</div>
+              <div style="font-size:15px;margin-top:5px;line-height:22px">
+                医护人员即使在隔离病房接触患者，会严格按要求，经科学防护才进入病房开展工作，会经过正确的消毒防护措施和院感防护措施。他们离开病房和医院时，不会携带病毒。医护人员是抗击疫情一线的战士，希望每一位医护人员都能被尊重被善待。
+              </div>
+              <div style="font-size:14px;margin-top:5px;text-align:right;color:#666">2020/2/24 鲁迅 </div>
+            </div>
+
+            <div style="margin:15px;padding-bottom:15px;border-bottom: 1px dashed #e5e5e5;">
+              <div style="font-size:16px">开发部同事：</div>
+              <div style="font-size:15px;margin-top:5px;line-height:22px">3月份开始实行5天工作制。</div>
+              <div style="font-size:14px;margin-top:5px;text-align:right;color:#666">2020/2/23 鲁迅 </div>
+            </div>
+
+          </div>
+
+        </div>
+
+      </div>
+
+
+    </div>
 
     <div class="task_main">
       <div class="task_top">
         <div class="task_selection_warp">
           <div class="task_selection">
-            
+
             <div class='task_selection_check'>时刻</div>
             <div style="margin-left:20px">决策</div>
             <div style="margin-left:20px">报表</div>
+            <div style="position: absolute;right: 15px;font-size:25px;color:#666">
+              <svg class="icon" aria-hidden="true">
+                <use xlink:href="#icon-gonggao1"></use>
+              </svg></div>
           </div>
+
         </div>
 
         <div class="task_msg">
@@ -109,8 +161,28 @@
   import TaskList from "./components/tasklist";
   export default {
     name: 'task',
+    data() {
+      return {
+        ifreport: 1, //0-关闭最新公告 1-弹出最新公告
+        rpstyle: {
+          height: ''
+        }
+      }
+    },
+    computed: {
+      bg_blur: function () {
+        return {
+          blur: this.ifreport == 1
+        }
+      }
+    },
     components: {
       TaskList
+    },
+    methods: {
+      ifreport_shift() {
+        this.ifreport = 1 - this.ifreport
+      }
     }
 
   }
@@ -134,9 +206,10 @@
     display: flex;
     /* width: 90px;
     margin: 10px auto 5px auto; */
-    margin:10px 20px;
+    margin: 10px 20px;
     font-size: 15px;
     font-weight: bold;
+
   }
 
   .task_selection div {

src/router/index.js

@@ -53,6 +53,9 @@ import Eqfixview from '@/pages/eqfixview'
 import Syopen from '@/pages/shangye/syopen'
 import Symarket from '@/pages/shangye/symarket'
 import Symy from '@/pages/shangye/symy'
+import Dhb_mtrlinfo from '@/pages/dhb/dhb_mtrlinfo'
+import GongGao from '@/pages/gonggao'
+import GongGaoEdit from '@/pages/gonggao_edit'
 
 Vue.use(Router)
 
@@ -68,6 +71,20 @@ export default new Router({
       name: 'Wkpmxlist',
       component: Wkpmxlist
     },
+    {
+      path: '/gonggao',
+      name: 'GongGao',
+      component: GongGao
+    },{
+      path: '/gonggaoedit',
+      name: 'GongGaoEdit',
+      component: GongGaoEdit
+    },
+    {
+      path: '/dhb_mtrlinfo',
+      name: 'Dhb_mtrlinfo',
+      component: Dhb_mtrlinfo
+    },
     {
       path: '/symarket',
       name: 'Symarket',