manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/desktop/index.vue

<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <div class="nowTime">
        <i class="fa fa-clock-o"></i>
        {{currentTime}}
      </div>
    </el-col>

    <!-- 卡片列表 -->
    <div>
      <el-col :span="6" v-for="(item, index) in desktopList" :key="index" class="one_div">
        <el-card :body-style="{ padding: '0px' }" shadow="hover" class="one_card">
          <div class="one_card_img">
            <el-image :src="this.pic_url" class="image" lazy>
              <div slot="error" class="image-slot">
                <el-image :src="require('../../assets/image/noPic.png')" class="image" lazy></el-image>
              </div>
            </el-image>
            <div :id="'over'+index" class="over">
              <el-button type="primary" plain @click.native="jumpTo(item.id)">
                <i class="fa fa-link"></i> 所有截图
              </el-button>
            </div>
          </div>
          <div class="one_card_txt">
            <!-- pic_type 这里需要一个巨长的三目运算符 -->
            <!-- 0-编程，1-查资料，2-看文档，3-做设计，4-美工，5-运营，6-看小说，7-打游戏，8-听音乐 -->
            <!-- 现在基本都是null -->
            <span>{{item.pic_type == null ? 0 : item.pic_type}}</span>
            <div class="bottom clearfix">
              <el-link>
                <i class="fa fa-circle"></i>
                {{item.name}}
              </el-link>
              <time class="time">{{item.time}}</time>
            </div>
          </div>
        </el-card>
      </el-col>
    </div>
  </section>
</template>

<script>
import util from "../../common/js/util";
export default {
  data() {
    return {
      filters: {
        keyName: ""
      },
      user: JSON.parse(sessionStorage.getItem("user")),
      timer: "",
      currentTime: util.formatDate.format(
        new Date(new Date()),
        "yyyy-MM-dd hh:mm:ss"
      ),
      desktopList: []
    };
  },
  methods: {
    getTime() {
      var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
      this.timer = setInterval(function() {
        _this.currentTime = util.formatDate.format(
          new Date(new Date()),
          "yyyy-MM-dd hh:mm:ss"
        );
      }, 1000);
    },
    //获取项目列表
    getDesktopList() {
      this.listLoading = true;
      this.http.post(
        this.port.desktop.list,
        {},
        res => {
          this.listLoading = false;
          if (res.code == "ok") {
            this.desktopList = res.data;
          } else {
            this.$message({
              message: res.msg,
              type: "error"
            });
          }
        },
        error => {
          this.listLoading = false;
          this.$message({
            message: error,
            type: "error"
          });
        }
      );
    },
    jumpTo(id) {
      this.$router.push("/desktop/" + id);
    }
  },
  created() {
    this.getTime();
  },
  mounted() {
    this.getDesktopList();
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
};
</script>

<style lang="scss" scoped>
.nowTime {
  height: 35px;
  line-height: 28px;
  font-size: 18px;
  color: #20a0ff;
  margin-left: 10px;
  i {
    margin-right: 10px;
  }
}

.one_div {
  padding: 15px;
  .one_card {
    .one_card_img {
      position: relative;
      .image {
        width: 100%;
      }
      .over {
        display: none;
        width: 100%;
        height: 98%;
        background: rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 0;
        text-align: center;
      }
    }
    .one_card_txt {
      padding: 13px;
      .bottom {
        margin-top: 13px;
        line-height: 12px;
        i {
          color: #9ed0ff;
          margin-right: 5px;
        }
        .time {
          float: right;
          margin-top: 2px;
          color: #999;
        }
      }
    }
  }
  .one_card:hover {
    .one_card_img {
      .over {
        display: block !important;
      }
    }
  }
}
</style>
<style lang="scss">
.image {
  .el-image__inner {
    height: 11.6vw !important;
  }
}

.one_card_img {
  .over {
    .el-button {
      margin-top: 25%;
    }
  }
}
</style>