Card.vue

<template>
  <div class="card">
    <el-card shadow="hover" :body-style="{ padding: '0px' }">
      <!-- <img  :src="require(`@/assets/images/${content.image}`)" class="image" /> -->
      <img
        :src="`https://picsum.photos/id/${content.image}/1024/768`"
        class="image"
      />
      <el-row class="card-content">
        <el-col class="card-content-left">
          <div class="card-word">
            <span>项目英文名：</span>
            <em v-if="isEdit == false">{{ content.name }}</em
            ><el-input v-model="content.name" v-if="isEdit == true"></el-input>
          </div>
          <div class="card-word">
            <span>项目中文名：</span>
            <em>{{ content.name_zh }}</em>
          </div>
          <div class="card-word">
            <span>项目端口：</span>
            <em>{{ content.port }}</em>
          </div>
          <div class="card-word">
            <span>项目提供者：</span>
            <em>{{ content.provider }}</em>
          </div>
          <div class="card-word">
            <span>数据库文件名：</span>
            <em>{{ content.dbfilename }}</em>
          </div>
        </el-col>
        <el-col class="card-content-right">
          <i :class="isEditIcon" @click="handleEdit"></i>
          <i class="el-icon-view" @click="handleView"></i>
          <i class="el-icon-delete" @click="handleDelete"></i>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    content: {
      type: Object,
    },
  },
  mounted() {
    // console.log("card cardIndex", this.cardIndex);
  },
  data() {
    return {
      labelPosition: "right",
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      isEdit: false,
      isEditIcon: "el-icon-edit-outline",
    };
  },
  methods: {
    handleEdit() {
      if (this.isEdit == true) {
        this.updateItem(this.content);
      }
      this.isEdit = !this.isEdit;
      this.isEditIcon =
        this.isEditIcon == "el-icon-success"
          ? "el-icon-edit-outline"
          : "el-icon-success";
      console.log("handleEdit");
    },
    handleView() {
      console.log("handleView");
    },
    handleDelete() {
      console.log("handleDelete");
      console.log(this.content);
      this.deleteItem(this.content);
    },
    deleteItem(item) {
      var url = this.$client.apiUrlprefix() + "/project/";
      this.$axios.post(url + "delete", item, (res) => {
        console.log(res);
        this.$emit("deleteGrid");
      });
    },
  },
  updateItem(item) {
    var url = this.$client.apiUrlprefix() + "/project/";
    this.$axios.post(url + "update", item, (res) => {
      console.log(res);
    });
  },
};
</script>

<style lang="scss" scoped>
.card {
  height: 100%;
  .el-card {
    height: 100%;
  }
  .el-card.is-hover-shadow {
    border: 1px solid #bbb;
    &:hover {
      box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.5);
    }
  }
  img {
    display: block;
    width: 100%;
    padding-bottom: 10px;
  }
  .card-content-left {
    width: calc(100% - 30px);
  }
  .card-content-right {
    width: 30px;
    text-align: center;
    i {
      cursor: pointer;
      display: block;
      padding: 10px 0;
      font-size: 18px;
      &:hover {
        color: #409eff;
      }
    }
  }
  .card-word {
    position: relative;
    padding: 7px 0;
    padding-left: 105px;
    span {
      position: absolute;
      left: 0;
      top: 12px;
      padding-left: 10px;
      // display: inline-block;
      // width: 100px;
      // text-align: right;
      font-size: 14px;
    }
    em {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      font-style: normal;
    }
  }
}
</style>