通告列表初始化

src/HManagement/notice/index.vue

@@ -1,12 +1,216 @@
 <template>
-  <div></div>
+  <div class="normal-card">
+    <div class="search">
+      <el-input placeholder="请输入" v-model="searchTitle" class="input-with-select">
+        <el-button slot="append" icon="el-icon-search">查询</el-button>
+      </el-input>
+    </div>
+    <div class="list">
+      <div class="list-box">
+        <div class="item-left" @click="itemClick()" >
+          <el-image 
+                   src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" 
+                  lazy
+                  fit="fill"></el-image>
+          <div class="text-panl">
+            <div class="title">
+              通告标题通告标题通告标题通告标题通告通告标题通告标题
+            </div>
+            <div class="descript">
+              通告标题通告标题通告标题通告标题通告通告标题通告标题
+            </div>
+            <div class="info">
+              <span class="tag">促销活动</span>
+              <span>2022-01-01 11:11:11</span>
+              <span>阅读量:<span>12</span></span>
+              <span><span>附件数量：<span>1</span></span></span>
+            </div>
+          </div>
+        </div>
+        <div class="item-right">
+          <p class="message">未读</p>
+        </div>
+      </div>
+      <div class="list-box">
+        <div class="item-left">
+          <el-image src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" @click="itemClick()" lazy></el-image>
+          <div class="text-panl">
+            <div class="title">
+              通告标题通告标题通告标题通告标题通告通告标题通告标题
+            </div>
+            <div class="descript">
+              通告标题通告标题通告标题通告标题通告通告标题通告标题
+            </div>
+            <div class="info">
+              <span class="tag">促销活动</span>
+              <span>2022-01-01 11:11:11</span>
+              <span>阅读量:<span>12</span></span>
+              <span><span>附件数量：<span>1</span></span></span>
+            </div>
+          </div>
+        </div>
+        <div class="item-right">
+          <p class="message">未读</p>
+        </div>
+      </div>
+    </div>
+    
+    <div class="pagination">
+      <el-pagination
+        background
+        small
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-size="param.content.pageSize"
+        layout="total, prev, pager, next, jumper"
+        :total="total">
+      </el-pagination>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
+  name: "Index",
+  data() {
+    return {
+      param:{
+        "classname": "webmanage.users.users",
+        "method": "query_userList",
+        "content": {
+          "pageNumber": 1,
+          "pageSize": 20,
+          "where":{
+            "condition":""
+          }
+        }
+      },
+      searchTitle: '',
+      list:[],
+      total:0,
+      currentPage:0,
+    };
+  },
+  created() {},
+  mounted() {},
+  methods: {
+    handleSizeChange(val) {
+      // console.log(`每页 ${val} 条`);
+      this.param.content.pageSize = val
+      this.listData()
+    },
+    handleCurrentChange(val) {
+      // console.log(`当前页: ${val}`);
+      this.param.content.pageNumber = val
+      this.listData()
+    },
+    //通告iten单击事件
+    itemClick() {
+      this.$router.push({
+        path: '/notice_detail',
+        query: {
+          id: 1
+        }
+      })
+    }
+  }
+};
+</script>
+<style scoped>
+.normal-card {
+  width: 1200px;
+  padding: 20px 0 0 30px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 10px;
+  font-family: PingFang SC-Regular;
+  box-sizing: border-box;
+}
+.normal-card .search {
+  width: 320px;
+  height: 36px;
+}
+.normal-card .list {
+  margin-top: 30px;
+}
+.normal-card .list-box {
+  display: flex;
+  justify-content: space-between;
+  padding:  20px 0;
+  border-bottom: 1px solid #DDDDDD;
+  padding-right: 30px;
+}
+.normal-card .list-box:hover {
+  cursor: pointer;
+  background: #FAFAFA;
+}
+.normal-card .list-box:first-child {
+  padding-top: 0;
+}
+.normal-card .list-box:last-child {
+  border-bottom: none;
+}
+.normal-card .list-box .item-left {
+  display: flex;
+}
+.normal-card .list-box .item-left .el-image {
+  width: 315px;
+  height: 80px;
+  margin-right: 20px;
+  border-radius: 8px;
+}
+.normal-card .list-box .item-left .text-panl .title {
+  font-size: 14px;
+  color: #333333;
+}
+.normal-card .list-box .item-left .text-panl .descript {
+  font-size: 12px;
+  color: #666666;
+  margin-top: 9px;
+}
+.normal-card .list-box .item-left .text-panl .info {
+  line-height: 22px;
+  margin-top: 10px;
+}
+.normal-card .list-box .item-left .text-panl .info .tag {
+  width: 58px;
+  height: 22px;
+  border: 1px solid #FA8C16;
+  color: #FA8C16;
+  margin-right: 10px;
+  text-align: center;
+}
+.normal-card .list-box .item-left .text-panl .info span {
+  font-size: 12px;
+  display: inline-block;
+}
+.normal-card .list-box .item-left .text-panl .info span:nth-child(2) {
+  margin-right: 38px;
+}
+.normal-card .list-box .item-left .text-panl .info span:nth-child(3) {
+  margin-right: 50px;
+}
+
+.normal-card .list-box .item-right {
 
 }
+.normal-card .list-box .item-right p {
+  width: 60px;
+  height: 32px;
+  border-radius: 4px;
+  background: #FA8C16;
+  text-align: center;
+  line-height: 32px;
+  font-size: 14px;
+  color: #FFFFFF;
+  cursor: pointer;
+}
+.normal-card .pagination {
+  margin: 25px 0 10px 0;
+  float: right;
+  padding-right: 30px;
+}
 
-</script>
-<style>
 </style>

src/HManagement/notice/notice_detail/NoticeDetail.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="normal-card">
+    <div class="title-box">
+      <div class="title">五一活动通报与操作指南</div>
+      <div class="descript">请赶紧布置你的门店，并按指引执行</div>
+      <div class="info">
+        <span class="tag">促销活动</span>
+        <span>2022-01-01 11:11:11</span>
+      </div>
+    </div>
+    <div class="text-content">
+      <span>正文小标题</span>
+      <p>
+        正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容
+        正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容
+        正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容
+        正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容
+        正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容
+        正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容正文内容
+      </p>
+      <div class="file"></div>
+    </div>
+    <div class="file-content">
+      <p class="title">视频</p>
+      <div class="video"></div>
+      <div class="file-download">
+        <p class="title">附件下载</p>
+        <div class="file-list">
+          <div class="item-file">
+            <div class="left">
+              <div class="icon">
+                <img src="../../../assets/file_icons/image.png" alt />
+              </div>
+              <div class="text">
+                <p>销售策略</p>
+                <p>2022-01-02 15:30:02</p>
+              </div>
+            </div>
+            <div class="right">
+              <p>预览</p>
+              <button>下载</button>
+            </div>
+          </div>
+          <div class="item-file"></div>
+          <div class="item-file"></div>
+          <div class="item-file"></div>
+          <div class="item-file"></div>
+          <div class="item-file"></div>
+        </div>
+      </div>
+    </div>
+    <div class="comments">
+      <div class="score-box">
+        <p>评分反馈</p>
+        <div class="handle">
+          <p>总体</p>
+          <el-rate v-model="score" :colors="scoreColor"></el-rate>
+          <p>满意</p>
+        </div>
+        <p>5人评分</p>
+      </div>
+      <div class="text-box">
+        <p>留言反馈</p>
+        <div class="comment-panl">
+          <el-input type="textarea" :rows="4" placeholder="请填写留言" resize="none" v-model="textarea"></el-input>
+          <el-button type="success" size="small">发表</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "NoticeDetail",
+  data() {
+    return {
+      score: 0,
+      scoreColor: ["#99A9BF", "#F7BA2A", "#FADB14"],
+      textarea: ""
+    };
+  },
+  computed: {},
+  watch: {},
+  mounted() {
+    console.log(this.$route.query.id);
+  },
+  methods: {}
+};
+</script>
+
+<style scoped>
+.normal-card {
+  width: 1200px;
+  padding: 30px;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 10px;
+  font-family: PingFang SC-Regular;
+  box-sizing: border-box;
+}
+.normal-card .title-box {
+  padding-bottom: 20px;
+  border-bottom: 1px solid #eeeeee;
+}
+.normal-card .title-box .title {
+  font-size: 18px;
+  font-family: PingFang SC-Bold, PingFang SC;
+  font-weight: bold;
+  color: #333333;
+  line-height: 24px;
+  margin-bottom: 10px;
+}
+.normal-card .title-box .descript {
+  font-size: 14px;
+  font-family: PingFang SC-Bold, PingFang SC;
+  font-weight: bold;
+  color: #333333;
+  line-height: 24px;
+}
+.normal-card .title-box .info {
+  line-height: 16px;
+  margin-top: 10px;
+  font-size: 12px;
+}
+.normal-card .title-box .info .tag {
+  width: 48px;
+  height: 16px;
+  border: 1px solid #fa8c16;
+  color: #fa8c16;
+  margin-right: 10px;
+  text-align: center;
+  font-size: 10px;
+  display: inline-block;
+  padding: 2px 5px;
+}
+.normal-card .text-content {
+  padding: 20px 0;
+  border-bottom: 1px solid #eeeeee;
+  font-size: 12px;
+}
+.normal-card .text-content .file {
+  width: 690px;
+  height: 360px;
+  background: red;
+  margin-top: 10px;
+}
+.normal-card .file-content {
+  padding: 20px 0;
+  border-bottom: 1px solid #eeeeee;
+  font-size: 12px;
+}
+.normal-card .file-content .title {
+  font-size: 14px;
+  font-family: PingFang SC-Bold, PingFang SC;
+  font-weight: bold;
+  color: #333333;
+}
+.normal-card .file-content .video {
+  width: 690px;
+  height: 360px;
+  background: red;
+  margin-top: 10px;
+}
+.normal-card .file-content .title {
+  margin-bottom: 10px;
+}
+.normal-card .file-content .file-download {
+  margin-top: 40px;
+}
+.normal-card .file-content .file-download .file-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.normal-card .file-content .file-download .item-file {
+  width: 334px;
+  height: 44px;
+  background: #ffffff;
+  border-radius: 4px 4px 4px 4px;
+  border: 1px solid #cccccc;
+  margin: 0 10px 10px 0;
+  padding: 12px 16px;
+  display: flex;
+  justify-content: space-between;
+}
+.normal-card .file-content .file-download .item-file .left {
+  display: flex;
+  align-items: center;
+}
+.normal-card .file-content .file-download .item-file .left .icon {
+  width: 29px;
+  height: 29px;
+  margin-right: 16px;
+}
+.normal-card .file-content .file-download .item-file .left .icon img {
+  width: 29px;
+  height: 29px;
+}
+.normal-card .file-content .file-download .item-file .left .text {
+}
+.normal-card .file-content .file-download .item-file .left .text p:first-child {
+  font-size: 14px;
+  font-family: PingFang SC-Bold, PingFang SC;
+  font-weight: bold;
+  color: #333333;
+  line-height: 22px;
+}
+.normal-card .file-content .file-download .item-file .left .text p:last-child {
+  font-size: 10px;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #999999;
+  line-height: 22px;
+}
+.normal-card .file-content .file-download .item-file .right {
+  display: flex;
+  align-items: center;
+}
+.normal-card .file-content .file-download .item-file .right p {
+  font-size: 14px;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #3874f6;
+}
+.normal-card .file-content .file-download .item-file .right button {
+  width: 70px;
+  height: 32px;
+  background: #3874f6;
+  border-radius: 52px;
+  border: none;
+  color: #ffffff;
+  margin-left: 16px;
+  cursor: pointer;
+}
+.normal-card .comments {
+  margin-top: 20px;
+}
+.normal-card .comments .score-box {
+}
+.normal-card .comments .score-box p:first-child {
+  font-size: 14px;
+  font-family: PingFang SC-Bold, PingFang SC;
+  font-weight: bold;
+  color: #333333;
+}
+.normal-card .comments .score-box .handle {
+  margin-top: 22px;
+  display: flex;
+}
+.normal-card .comments .score-box .handle p:first-child {
+  font-size: 14px;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #333333;
+  margin-right: 20px;
+}
+.normal-card .comments .score-box p:last-child {
+  font-size: 12px;
+  font-family: PingFang SC-Regular, PingFang SC;
+  font-weight: 400;
+  color: #999999;
+  margin-top: 12px;
+}
+.normal-card .comments .score-box .handle p:last-child {
+  font-size: 14px;
+  font-family: PingFangSC-Regular-, PingFangSC-Regular;
+  font-weight: normal;
+  color: #262626;
+  margin-left: 20px;
+  margin-top: 0;
+}
+.normal-card .comments .text-box {
+  margin-top: 40px;
+}
+.normal-card .comments .text-box p {
+  font-size: 14px;
+  font-family: PingFang SC-Bold, PingFang SC;
+  font-weight: bold;
+  color: #333333;
+}
+.normal-card .comments .text-box .comment-panl {
+  margin-top: 10px;
+}
+.normal-card .comments .text-box .comment-panl .el-input {
+  min-height: 64px;
+}
+.normal-card .comments .text-box .comment-panl .el-button {
+  background: #52c41a;
+  margin-top: 10px;
+}
+</style>

src/components/layout/index.vue

@@ -33,10 +33,10 @@
             element-loading-background="rgba(255, 255, 255, 0.8)">
             <router-view></router-view>
           </el-main>
-          <el-footer class="flex-footer">
+          <!-- <el-footer class="flex-footer">
             <p>技术支持:XXXXXXX</p><br>
-            <!-- <small class="lastP">浙ICP备&nbsp;18043486号-1</small> -->
-          </el-footer>
+            <small class="lastP">浙ICP备&nbsp;18043486号-1</small>
+          </el-footer> -->
         </el-container>
       </el-container>
     </el-container>

src/router/HManagement.js

@@ -19,9 +19,17 @@ const HManagement = [{
   name: 'notice',
   meta: {
     title: '通报',
-    ast_nav:true
+    ast_nav:false
   },
   component: () => import(/* webpackChunkName: "about" */ '@/HManagement/notice/index.vue')
+},{
+  path: '/notice_detail',
+  name: 'notice_detail',
+  meta: {
+    title: '通告内容',
+    ast_nav:false
+  },
+  component: () => import(/* webpackChunkName: "about" */ '@/HManagement/notice/notice_detail/NoticeDetail')
 },{
   path: '/archives_list',
   name: 'archives',

src/views/login/login.vue

@@ -78,7 +78,7 @@ export default {
       },
       loginForm:{
         // phonenumber:'13732579910'
-        phonenumber:'13732579910'
+        phonenumber:'13805731234'
       },
       activeName:'first',
       checked:false,