yzzn-middleground-supplier/src/views/components/register/package.vue

<template>
  <div
    class="packageSty"
    :style="borderSty"
    @mouseover="mouseOver()"
    @mouseleave="mouseLeave()"
    @click="mouseClick()"
  >
    <div class="topSty">
      <div class="packageName" :style="`color:` + color">试用版</div>
      <div class="discription">体验全新XXX服务</div>
      <div class="price">
        <span class="yuan">￥</span><span class="num">10000.00</span
        ><span class="nian">/年 起</span>
      </div>
      <div class="memberCount">仅限5人</div>

      <div class="ktBtn">
        <el-button class="btnSty">开通</el-button>
      </div>
    </div>
    <div class="middleSty">
      <div class="mid">
        <el-tag size="mini" style="width: 100%">网页端应用</el-tag>
      </div>
      <div class="mid">
        <el-tree
          :data="data1"
          :props="defaultProps"
          :default-expand-all="true"
        ></el-tree>
      </div>
      <div class="mid">
        <el-tag size="mini" type="success" style="width: 100%"
          >小程序端应用</el-tag
        >
      </div>
      <div class="mid">
        <el-tree
          :data="data2"
          :props="defaultProps"
          :default-expand-all="true"
        ></el-tree>
      </div>
    </div>
    <div class="bottomSty">
      <div style="display: block">
        <div class="fuwuSty">使用培训：√</div>
        <div class="fuwuSty">疑问解答：√</div>
        <div class="fuwuSty">业务咨询：×</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "package-module",
  props: {
    color: {
      type: String,
      default: "#000000",
    },
    packName: {
      type: String,
      default: "nullName",
    },
    changeSty: {
      type: Function,
    },
  },
  data() {
    return {
      borderSty: "border-top:3px " + this.color + " solid",
      styFlag: false,
      data1: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      data2: [
        {
          label: "一级 1",
          children: [
            {
              label: "二级 1-1",
              children: [
                {
                  label: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 2",
          children: [
            {
              label: "二级 2-1",
              children: [
                {
                  label: "三级 2-1-1",
                },
              ],
            },
            {
              label: "二级 2-2",
              children: [
                {
                  label: "三级 2-2-1",
                },
              ],
            },
          ],
        },
        {
          label: "一级 3",
          children: [
            {
              label: "二级 3-1",
              children: [
                {
                  label: "三级 3-1-1",
                },
              ],
            },
            {
              label: "二级 3-2",
              children: [
                {
                  label: "三级 3-2-1",
                },
              ],
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
    };
  },
  mounted() {},
  methods: {
    changeStyFlag(flag) {
      this.styFlag = flag;
      if (!flag) this.mouseLeave();
    },
    mouseClick() {
      this.changeSty(this.packName);
    },
    mouseOver() {
      this.borderSty = "border:3px " + this.color + " solid";
    },
    mouseLeave() {
      if (!this.styFlag)
        this.borderSty = "border-top:3px " + this.color + " solid";
    },
  },
};
</script>

<style scoped>
.fuwuSty {
  width: 100%;
  text-align: center;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #6f6f6f;
  line-height: 16px;
  letter-spacing: 1px;
  font-style: normal;
  text-transform: none;
  margin-top: 10px;
}
.mid {
  width: 90%;
  margin: 0 auto 10px auto;
}
.btnSty {
  background-color: #1890ff;
  width: 134px;
  height: 34px;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: bold;
  font-size: 14px;
  color: #ffffff;
  line-height: 16px;
  letter-spacing: 1px;
  font-style: normal;
  text-transform: none;
}
.ktBtn {
  width: 100%;
  text-align: center;
  padding-top: 10px;
}
.memberCount {
  width: 100%;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 16px;
  letter-spacing: 1px;
  text-align: center;
  font-style: normal;
  text-transform: none;
}
.yuan {
  font-size: 14px;
  color: #333333;
}
.num {
  font-size: 32px;
  color: #333333;
}
.nian {
  font-size: 14px;
  color: #333333;
}
.price {
  width: 100%;
  text-align: center;
  padding-top: 5px;
}
.discription {
  width: 100%;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 14px;
  color: #333333;
  line-height: 16px;
  letter-spacing: 1px;
  text-align: center;
  font-style: normal;
  text-transform: none;
  margin-top: 10px;
}
.packageName {
  width: 100%;
  text-align: center;
  font-family: Microsoft YaHei, Microsoft YaHei;
  font-weight: 400;
  font-size: 20px;
  line-height: 23px;
  letter-spacing: 1px;
  font-style: normal;
  text-transform: none;
}
.topSty {
  width: 95%;
  height: 200px;
  margin: 5px auto 0 auto;
  border-bottom: 1px solid #ebebeb;
}
.middleSty {
  width: 95%;
  height: 450px;
  margin: 5px auto;
  overflow-y: scroll;
  padding-bottom: 15px;
  border-bottom: 1px solid #ebebeb;
}
/**隐藏滚动条 */
::-webkit-scrollbar {
  display: none;
}
.bottomSty {
  width: 95%;
  height: 100px;
  margin: 1px auto 5px auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.packageSty {
  width: 16%;
  float: left;
  margin-left: 2%;
  margin-right: 2%;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>