系统应用于对各类不良信息进行公示

1、背景

针对目前各类打工人的工作生活，所遇仲裁无门，投诉无果的现象，以及各类公司有恃无恐的态度作为背景，特此对开源项目进行修改，诞生了此套系统

2、系统信息收集

为保障小人物权益，本系统退出匿名收集信息功能，所需的账号以及密码，完全由用户自主输入，不收集用户敏感信息作为保障

体验网址:www.weshir.com

3、部分源码以及项目截图

信息发布页面

在这里插入代码片
  <el-row :gutter="20">
    <!--    <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">左侧占位</el-col>-->
      <el-col :xs="10" :sm="14">

        <el-card style="background-color: rgba(255,255,255,0.9)" class="left-item">

          <div slot="header" class="total">
            <div class="titleIndex">
              <i v-if="selected" class="el-icon-back" @click="updateBlogList"></i>
              <span>{{ selectMethod }}</span>
            </div>
            <!-- <span>共 <span style="color: #3a8ee6; font-size: 20px">{{totalcount}}</span> 篇</span> -->
          </div>
          <el-row type="flex" align="middle" style="flex-wrap: wrap" :gutter="20" v-for="blog in blogList"
                  :key="blog.id"
                  shadow="never" class="blog-content">
            <div >
              <!--              <el-col class="img" :xs="24" :sm="6">-->

              <!--              </el-col>-->
              <el-col :xs="24" :sm="18"
                      style="padding-left: 10px;padding-right: 10px;margin-bottom: 5px;margin-top: -5px;">
                <div>
                  <h3 style="font-weight: bold;font-size: 30px" @click="getBlogInfo(blog.id)">
                    <svg-icon icon-class="Topping" v-show="blog.top==1"/>
                    {{ blog.title }}
                  </h3>
                  <div style="margin-bottom: 10px;" @click="getBlogInfo(blog.id)">
                    <span style="color: rgba(0, 0, 0, .4);"> {{ blog.blogDesc }}</span>
                  </div>
                  <div v-html="blog.content" @click="getBlogInfo(blog.id)"></div>
                  <div style="margin-bottom: 10px;">
                    <el-tag effect="plain" size="mini" v-for="tag in blog.tags" :key="tag.tagId" type="success">
                      {{ tag.tagName }}
                    </el-tag>
                  </div>
                  <div class="blog-info">
                    <div class="user-info">
                      <i class="el-icon-user"></i>
                      <span class="header" style="font-size: 15px"> {{ blog.createBy }}</span>
                    </div>
                    <div class="blog-date">
                      <i class="el-icon-date"></i>
                      <span style="font-size: 15px"> {{ blog.createTime }}</span>
                    </div>
                    <div>
                      <i class="el-icon-view"></i>
                      <span> {{ blog.views }}</span>
                    </div>
                    <div class="blog-type">
                      <el-tag size="mini" v-for="tag in blog.types" :key="tag.typeId" type="info">
                        {{ tag.typeName }}
                      </el-tag>
                    </div>

                  </div>
                </div>
                <el-image v-if="blog.blogPicType === '0'" lazy :src="blog.blogPicLink" @click="getBlogInfo(blog.id)">
                  <div slot="error" class="image-slot">
                    <el-image src="/errorImg.jpg" fit="cover" class="blogPic"></el-image>
                  </div>
                </el-image>
                <el-image v-if="blog.blogPicType === '1'" style="width:60%;height: 60%" lazy @click="getBlogInfo(blog.id)"
                          :src="blog.blogPic"></el-image>
              </el-col>
            </div>
          </el-row>
          <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum"
                      :limit.sync="queryParams.pageSize"
                      background layout="total, sizes, prev, pager, next, jumper" @pagination="getBlogList"
                      style="margin-bottom: 30px;float: right;margin-right: 10px;"/>
        </el-card>

      </el-col>
      <el-col :xs="24" :sm="5">
        <el-card style="background-color: rgba(255,255,255,0.9)" class=" right-item">
          <div slot="header" class="attributes">
            <b>分类</b>
          </div>
          <ul class=" blog-type-ul" style="margin-top: 5px;">
            <li class=" blog-type-li" v-for="cmsType in typeList" :key="cmsType.typeId" @click="selectType(cmsType)"
                :class="cmsType.typeId === typeId? 'activeType':''">
              <div style="display: flex;align-items: center">
                <el-image style="width: 28px;height: 28px; border-radius: 50%; margin-right: 10px" lazy
                          :src="cmsType.typePicLink" v-show="cmsType.typePicType == '0'">
                  <div slot="error" style="width: 28px;height: 28px; border-radius: 50%;">
                    <i class="el-icon-collection" style="margin-left:6px;"></i>
                  </div>
                </el-image>
                <el-image style="width: 28px;height: 28px; border-radius: 50%; margin-right: 10px" lazy
                          :src="cmsType.typePic" v-show="cmsType.typePicType == '1'">
                  <div slot="error" style="width: 28px;height: 28px; border-radius: 50%;">
                    <i class="el-icon-collection" style="margin-left:6px;"></i>
                  </div>
                </el-image>
                {{ cmsType.typeName }}
              </div>
              <div>{{ cmsType.blogNum }}</div>
            </li>
          </ul>
          <div class="more" @click="dealType">
            <i v-if="moreType" class="el-icon-arrow-down"></i>
            <i v-else class="el-icon-arrow-up"></i>
          </div>
        </el-card>
        <el-card style="background-color: rgba(255,255,255,0.9)" class=" right-item">
          <div slot="header" class="attributes">
            <b>标签</b>
          </div>
          <div class="tags">
            <div class=" tag-item" v-for="tag in tagList" :key="tag.tagId" @click="selectTag(tag)"
                 :class="tag.tagId === tagId? 'activeTag':''">
              <div class="sjx-outer">
                <div class="sjx-inner"></div>
              </div>
              <div class="tag">
                {{ tag.tagName }}
                {{ tag.blogNum }}
              </div>
            </div>
          </div>
          <div class="more" @click="dealTag">
            <i v-if="moreTag" class="el-icon-arrow-down"></i>
            <i v-else class="el-icon-arrow-up"></i>
          </div>
        </el-card>
        <el-card style="background-color: rgba(255,255,255,0.9)" class=" right-item">
          <div slot="header" class="attributes">
            <b>最新推荐</b>
          </div>
          <div class=" recommend-blog l-text" v-for="blog in recommendList" :key="blog.id"
               @click="getBlogInfo(blog.id)">
            <a class="recommend-a">{{ blog.title }}</a>
          </div>
        </el-card>
      </el-col>
      <el-col :sm="2" class="hidden-xs-only" style="opacity:0;">右侧占位</el-col>
    </div>
  </el-row>```

```bash
//获取屏幕尺寸，用于用户滑动屏幕，数据停顿
window.addEventListener('scroll', this.handleScroll)

    this.$nextTick(function () {
      // 仅在整个视图都被渲染之后才会运行的代码
      this.getTypeList()
      this.getBlogList();
      this.getTagList()
      this.getRecommendList()
      let str = '这是我的个人博客、会分享关于编程，开发以及其他方面的一些内容，希望可以对您有所帮助...';
      let idx = 0;
      let that = this
      let timer = setTimeout(function fn() {
        // console.log(this.intro)
        that.intro = that.intro + str.substring(idx, idx + 1)
        idx++
        if (idx > str.length) {
          that.intro = ''
          idx = 0
        }
        setTimeout(fn, 200)
      }, 2000)

      this.screenWidth = document.documentElement.clientWidth
    })
  
```handleScroll() {
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop
      this.isSticky = scrollTop > 100 // 当页面滚动超过100px时启用固定
    },
// 开始进入主页
    startRead() {
      this.$nextTick(() => {
        document.getElementById('index').scrollIntoView({
          behavior: 'smooth',
          block: 'start',
          // inline: 'nearest'
        });
      })
    },
    compare(property) {
      return function (a, b) {
        let value1 = a[property].length;
        let value2 = b[property].length;
        return value2 - value1;
      }
    },
    // 获取推荐不良信息列表
    async getRecommendList() {
      cmsListRecommend(this.queryParams).then(response => {
        const {
          data: res
        } = response;
        this.recommendList = response.rows.slice(0, 10);
        this.total = response.total;
      });
    },
    // 获取不良信息类型列表
    async getTypeList() {
      getBlogDetail(this.$route.query.id).then(response => {
        for (let i = 0; i < response.types.length; i++) {
          let typeInfo = response.types[i];
          if (typeInfo.typePic.length > 0) {
            response.types[i].typePic = process.env.VUE_APP_BASE_API + typeInfo.typePic
          }
        }
        ;
        const {
          data: res
        } = response;
        this.fullTypeList = response.types
        this.typeList = response.types.slice(0, 7);
      });
    },
###  评论
```bash
  <div class="container">
    <div class="comment" v-for="item in comments">
      <div class="info" :id="item.id">
        <el-avatar v-if="item.avatar!==''&&item.avatar!=null" :src="item.avatar"></el-avatar>
        <el-avatar v-else icon="el-icon-user-solid"></el-avatar>
        <div class="right">
          <div class="name">{{item.createBy}}</div>
          <div class="date">{{item.createTime}}</div>
        </div>
      </div>
      <div class="content">{{item.content}}</div>
      <div class="control">
        <span class="like" :class="{active: item.isLike}" @click="likeClick(item)">
          <svg-icon icon-class="like" />
          <span class="like-num" style="margin-left: 5px;">{{item.likeNum > 0 ? item.likeNum + '人赞' : '赞'}}</span>
        </span>
        <span class="comment-reply" @click="showCommentInput(item)">
          <svg-icon icon-class="comment" />
          <span style="margin-left: 5px;">回复</span>
        </span>
      </div>
      <div class="reply">
        <div class="item" v-for="reply in item.children" :id="reply.id">
          <div class="reply-content">
            <span class="from-name">{{reply.createBy}}</span><span>: </span>
            <span class="to-name" v-show="reply.parentId!=reply.mainId">@{{reply.pcreateBy}}</span>
            <span v-show="reply.delFlag=='0'">{{reply.content}}</span>
            <span v-show="reply.delFlag=='1'" style="color: #909399;">该评论已被删除！</span>
          </div>
          <div class="reply-bottom">
            <span>{{reply.createTime}}</span>
            <span class="reply-text" @click="showCommentInput(item, reply)">
              <svg-icon icon-class="comment" />
              <span style="margin-left: 5px;">回复</span>
            </span>
          </div>
        </div>
        <div class="write-reply" v-if="item.children!=null" @click="showCommentInput(item)">
          <i class="el-icon-edit"></i>
          <span class="add-comment">添加新评论</span>
        </div>
        <input-component :show="showItemId === item.id"
                         :value="inputComment"
                         :toComment="name"
                         :toId="id"
                         @cancel="cancelInput"
                         @confirm="commitComment">
        </input-component>
        <!--<transition name="fade">-->
        <!--<div class="input-wrapper" v-if="showItemId === item.id">-->
        <!--<el-input class="gray-bg-input"-->
        <!--v-model="inputComment"-->
        <!--type="textarea"-->
        <!--:rows="3"-->
        <!--autofocus-->
        <!--placeholder="写下你的评论">-->
        <!--</el-input>-->
        <!--<div class="btn-control">-->
        <!--<span class="cancel" @click="cancel">取消</span>-->
        <!--<el-button class="btn" type="success" round @click="commitComment">确定</el-button>-->
        <!--</div>-->
        <!--</div>-->
        <!--</transition>-->
      </div>
    </div>
  </div>