workorder_front/src/views/maintenance/beifenzhuye.vue

<template>
  <div class="cus-container">
    <div class="content">
      <div class="main">
        <div class="item" v-for="(item, index) in menuList" :key="index">
          <div class="item-top">
            <div>
              <div class="title">{{ item.title }}</div>
              <div class="subTitle">{{ item.subTitle }}</div>
            </div>
            <div class="item-top-right">
              <img :src="require(`@/assets/img/gdwel/${item.id}.png`)" alt="" />
            </div>
          </div>
          <div class="btn" @click="createNow(item.id)">立即创建</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuList: [
        {
          id: 1,
          title: "数据管理",
          subTitle: "日常数据管理维护工作",
        },
        {
          id: 2,
          title: "网络终端维护",
          subTitle: "网络终端设备的日常维护工作",
        },
        {
          id: 3,
          title: "办公系统维护",
          subTitle: "日常办公系统软件维护工作",
        },
        {
          id: 4,
          title: "系统优化",
          subTitle: "日常优化系统相关工作任务",
        },
        {
          id: 5,
          title: "网站维护",
          subTitle: "网站网页维护相关工作",
        },
        {
          id: 6,
          title: "公众号APP维护",
          subTitle: "移动端日常维护工作",
        },
      ],
    };
  },
  methods: {
    createNow(index) {},
  },
};
</script>
<style scoped lang="scss">
.content {
  background: #fff;
  height: 760px;
  min-height: 760px;
  padding: 50px;
  box-sizing: border-box;
  border-radius: 3px;
}
.main {
  display: flex;
  flex-wrap: wrap;
  .item {
    padding: 32px 30px 26px 37px;
    box-sizing: border-box;
    width: 336px;
    height: 184px;
    border: 1px solid #cfcfcf;
    margin-right: 50px;
    margin-bottom: 50px;
    .item-top {
      margin-bottom: 34px;
      display: flex;
      justify-content: space-between;
    }
    .title {
      font-size: 20px;
      color: #333333;
    }
    .subTitle {
      margin-top: 10px;
      color: #999999;
      font-size: 14px;
    }
    .btn {
      width: 117px;
      height: 37px;
      border-radius: 100px 100px 100px 100px;
      border: 1px solid #cfcfcf;
      font-size: 16px;
      color: #666;
      text-align: center;
      line-height: 37px;
    }
  }
  .item:nth-child(4) {
    margin-right: 0;
  }
}
</style>