official_revision/src/modules/Crad2.vue

<template>
  <div
    class="card_body intro-x"
    @change="isCard == true ? (isCard = true) : ''"
    v-if="CardData"
  >
    <div class="card_header">
      <div class="img-box">
        <div class="LeftPng">
          <img src="@/assets/images/niao.png" alt="" />
        </div>
        <span>{{ CardData.app_name }}</span>
      </div>
      <div class="cardRihgt">
        <div class="icon-box" @click="setCard">
          <i class="el-icon-more" style="font-size: 20px; color: #bbc6da"></i>
        </div>
      </div>
      <div class="cardRight2">
        <img :src="CardDataImg" alt="" />
        <span>{{ CardData.module_count }}个模块</span>
      </div>
    </div>
    <div class="cardListText">
      <ul>
        <li>
          <span class="leftText">版本信息</span>
          <span class="rightText">{{ CardData.name }} </span>
        </li>
        <li>
          <span class="leftText">APPID</span>
          <span class="rightText">{{ CardData.id }}</span>
        </li>
        <li>
          <span class="leftText">到期时间</span>
          <span class="rightText">{{ CardData.expire }}</span>
        </li>
      </ul>
    </div>
    <div class="cardButtom">查看详情</div>

    <div class="Card-box -intro-x" v-if="isCard">
      <div class="card-item cardClass" @click="getCardIiem('停用此软件')">
        停用此软件
      </div>
      <div class="card-item cardClass" @click="getCardIiem('前往后台设置')">
        前往后台设置
      </div>
      <div
        class="card-item"
        style="color: #ff4242"
        @click="getCardIiem('删除此软件')"
      >
        删除此软件
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["CardData"],
  computed: {
    CardDataImg: function () {
 
      var url = null;
 
      // if (this.CardData.platform === "ios") {
      //   url = require("../assets/images/ios.png");
      // }
      // if (this.CardData.platform === "android") {
      //   url = require("../assets/images/anzhuo.png");
      // }
      // if (this.CardData.platform === "web") {
      //   url = require("../assets/images/h5.png");
      // }

      // if (this.CardData.platform === "applet") {
      //   url = require("../assets/images/xiaochengxu.png");
      // }

      return url;
    },
  },
  data() {
    return {
      isCard: false,
    };
  },
  mounted() {},
  created() {},
  methods: {
    setCard: function () {
      this.isCard = !this.isCard;
    },

    getCardIiem: function (value) {
      if (value === "删除此软件") {
        this.$emit("getCardPop", true);
        this.isCard = false;
      } else {
        this.isCard = false;
      }
    },
  },
};
</script>

<style scoped>
/* pc */
@media screen and (max-width: 1172px) {
  .card_body {
    min-width: 47.2% !important;
  }
  .itemBoxB {
    width: 100% !important;
    margin-left: 0 !important;
    padding: 24px !important;
    display: block !important;
    float: none !important;
  }
}

@media screen and (max-width: 690px) {
  .card_body {
    width: 100% !important;
    display: block !important;
    float: none !important;
    padding-right: 54px !important;
    border-radius: 0 !important;
    min-width: 420px !important;
  }
}

.card_body {
  float: left;
  width: 23%;
  /* width: 372px; */
  min-width: 310px;
  background: #fff;
  height: 328px;
  margin: 0 2% 20px 0;
  border-radius: 8%;
  box-sizing: border-box;
  padding: 24px;
  position: relative;
}

.card_body:hover {
  box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.1);
}

.card_header {
  width: 100%;
  font-size: 26px;
  color: #333333;
  overflow: hidden;
  margin-bottom: 5px;
}

.img-box {
  float: left;
}

.LeftPng {
  width: 75px;
  height: 75px;
  border-right: 16px;
  overflow: hidden;
  border-radius: 23px;
}

.LeftPng > img {
  height: 75px;
  width: 75px;
  vertical-align: middle;
}

.cardRihgt {
  float: right;
}

.icon-box {
  width: 32px;
  height: 32px;
  text-align: center;
  line-height: 26px;
  border: 1px solid #bbc6da;
  box-sizing: border-box;
  border-radius: 50%;
  cursor: pointer;
}

.cardRight2 {
  width: 105px;
  height: 32px;
  background: #ffffff;
  border: 1px solid #bbc6da;
  border-radius: 16px;
  float: right;
  margin-right: 10px;
  color: #bbc6da;
  font-size: 12px;
  line-height: 32px;
  font-weight: 400;
  position: relative;
  text-indent: 40px;
}

.cardRight2 > img {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  position: absolute;
  left: -1px;
  top: -1px;
}

.cardListText,
ul,
li {
  overflow: hidden;
  width: 100%;
}

.cardListText li {
  line-height: 28px;
}

.leftText {
  float: left;
  color: #999999;
  font-size: 16px;
}
.rightText {
  float: right;
  color: #333333;
  font-size: 16px;
}

.cardButtom {
  background: #f7f7fa;
  width: 100%;
  height: 56px;
  box-sizing: border-box;
  border-radius: 22px;
  text-align: center;
  line-height: 56px;
  color: #8f9cc6;
  font-size: 16px;
  margin-top: 30px;
}

.cardButtom:hover {
  background: #1890fa;
  color: #fff;
  cursor: pointer;
}

.cardButtom:active {
  background: #58b0fd;
}

.Card-box {
  position: absolute;
  width: 200px;
  height: 138px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
  right: 20px;
  top: 65px;
}
.card-item {
  line-height: 46px;
  height: 46px;
  width: 100%;
  text-indent: 16px;
  font-size: 14;
  color: #bbc6da;
  cursor: pointer;
}

.cardClass:hover {
  background: #f7f8fb;
  color: #1890ff;
}
</style>