official_revision/src/modules/createAn3.vue

<template>
  <div>
    <div class="createAn2-header intro-x">
      <span
        class="span1"
        :class="{ spanActive: item.laber }"
        @click="setIsList(index)"
        v-for="(item, index) in ceateData"
        :key="index"
        >{{ item.title }}</span
      >
    </div>
    <div class="createAn2-title intro-x">
      <div class="left">
        <div class="div1">全选享受套餐价 ¥ 12999</div>
        <div class="div2">终端全选享受套餐价</div>
      </div>
      <div class="right">
        <span class="span1" v-show="spanNum >= 1">已选{{ spanNum }}个</span>
        <span class="span2" @click="getMokuaiDataLabel">{{ laberText }}</span>
      </div>
    </div>

    <div class="createAn2-html">
      <div class="createAn2-content intro-x">
        <div
          :class="{ ActiveIiem: item.laber }"
          class="item-box"
          v-for="(item, index) in ceateData3"
          :key="index"
          @click="item.laber = !item.laber"
        >
          <div class="div-top">
            <img
              class="mokuai-img"
              :src="item.laber ?item.url2 : item.url1"
              alt=""
            />
          </div>
          <div style="float: left">
            <div class="yuanMoney">{{ item.title }}</div>
            <div class="taoMoney">套餐价¥ {{ item.preferential }}</div>
          </div>
          <div
            class="float-yuan"
            v-show="item.laber == true"
            :class="{ 'el-icon-check': item.laber }"
          ></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["ceateData1"],
  computed: {
    spanNum: function () {
      return this.ceateData3.filter((item) => {
        return item.laber === true;
      }).length;
    },
    // 数据二次处理
    ceateData: function () {
      this.ceateData1.forEach((item, index) => {
        if (index === 0) {
          item.laber = true;
        } else [(item.laber = false)];
      });
      return this.ceateData1;
    },
  },
  data() {
    return {
      isList: 1,
      laberText: "全选",
      ceateData3: [
        {
          title: "安卓端",
          url1: require("../assets/images/anzhuo1.png"),
          url2: require("../assets/images/anzhuo2.png"),
          laber: false,
          preferential: 12999,
        },
        {
          title: "IOS端",
          url1: require("../assets/images/ios1.png"),
          url2: require("../assets/images/ios2.png"),
          laber: false,
          preferential: 12999,
        },
        {
          title: "WEB端",
          url1: require("../assets/images/h51.png"),
          url2: require("../assets/images/h52.png"),
          laber: false,
          preferential: 12999,
        },
        {
          title: "小程序端",
          url1: require("../assets/images/xiaochengxu1.png"),
          url2: require("../assets/images/xiaochengxu2.png"),
          laber: false,
          preferential: 12999.12,
        },
      ],
    };
  },
  methods: {
    //   全选/反选
    getMokuaiDataLabel: function () {
      // 全选
      if (this.laberText === "全选") {
        this.ceateData3.forEach((item) => {
          return (item.laber = true);
        });
        this.laberText = "反选";
      } else {
        this.laberText = "全选";
        this.ceateData3.forEach((item) => {
          return (item.laber = false);
        });
      }
    },
    setIsList: function (i) {
      this.ceateData.forEach((item, index) => {
        if (i === index) {
          item.laber = true;
        } else {
          item.laber = false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.ActiveIiem {
  background: #1890ff !important;
  .rightTitle {
    color: #fff !important;
  }
  .rightContent {
    color: #74bcfe !important;
  }

  .yuanMoney {
    color: #74bcfe !important;
  }
  .taoMoney {
    color: #fff !important;
  }
}
.createAn2-header {
  width: 100%;
  text-align: center;
  padding: 30px 0;
  font-size: 18px;
  color: #333333;
  span {
    display: inline-block;
    padding-bottom: 4px;
    position: relative;
    cursor: pointer;
  }
  .span1 {
    margin-right: 30px;
  }
  .spanActive {
    color: #1890fe;
  }

  .spanActive::after {
    content: "";
    position: absolute;
    height: 4px;
    background: #1890ff;
    border-radius: 2px;
    bottom: 0;
    width: 90%;
    left: 5%;
  }
}

.createAn2-title {
  width: 45.6%;
  min-width: 812px;
  overflow: hidden;
  margin: auto;
  .left {
    float: left;
    .div1 {
      color: #333333;
      font-size: 16px;
    }
    .div2 {
      color: #999999;
      font-size: 12px;
    }
  }
  .right {
    float: right;
    .span1 {
      font-size: 18px;
      color: #333333;
    }
    .span2 {
      margin-left: 5px;
      background: #1890ff;
      font-size: 14px;
      color: #fff;
      width: 68px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      display: inline-block;
      border-radius: 15px;
    }

    .span2:active {
      background: #2d97fa;
    }
  }
}

.createAn2-html {
  width: calc(45.6% + 12px);
  margin: 40px auto 0;
  min-width: 812px;
}

.createAn2-content {
  width: calc(100% + 12px);
  overflow: hidden;
  margin: auto;

  .item-box {
    width: 194px;
    height: 98px;
    box-sizing: border-box;
    background: #fcfcfd;
    border: 1px solid #f4f4f7;
    opacity: 1;
    border-radius: 16px;
    float: left;
    margin: 0 12px 12px 0;
    padding: 10px 12px;
    cursor: pointer;
  }

  .mokuai-img {
    width: 34px;
    height: 34px;
    float: left;
    margin-right: 4px;
  }
  .mokuai-right {
    float: left;
    width: 77%;

    .rightTitle {
      color: #333333;
      font-size: 14px;
      height: 18px;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .rightContent {
      color: #999999;
      font-size: 12px;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .div-top {
    overflow: hidden;
    margin-bottom: 4px;
  }

  .yuanMoney {
    font-size: 12px;
    color: #999999;
  }
  .taoMoney {
    color: #1890ff;
    font-size: 12px;
  }

  .float-yuan {
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    float: right;
    margin-top: 15px;
    text-align: center;
    line-height: 20px;
    color: #1890ff;
    font-weight: bold;
  }
}
</style>