zc_saas_admin/src/views/resource/videoManagement/flow/index.vue

<template>
  <div id="flow">
    <search-box-new
      ref="searchBox"
      :formData="formData"
      :formList="formList"
      @search="search"
      @init="init"
    />
    <table-list
      rowKey="id"
      ref="tableList"
      :tableSets="tableSet"
      :tableData="tableData"
      :navText="navText"
      @addClick="addClick"
      :loading="loading"
      @editInfo="editInfo"
    >
      <template slot="customize">
        <el-button size="small" type="warning" @click="PLDel"
          >批量删除</el-button
        >
        <el-button size="small" type="success" @click="moreActive"
          >同步BL频道</el-button
        >
      </template>
      <template slot="btn" slot-scope="props">
        <el-button type="text" @click="addClick(props.scope.row, 0)"
          >修改</el-button
        >
        <el-button type="text" @click="del(props.scope.row)">删除</el-button>
      </template>
    </table-list>
    <pagination
      :total="total"
      :pageSize="formData.pageSize"
      :currentPage="formData.pageNum"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    />
    <el-dialog
      @closed="loadingClose"
      :visible.sync="dialogVisible"
      width="630px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">
          {{ statusPop === 1 ? "添加" : statusPop === 0 ? "修改" : "详情" }}
        </div>
        <div class="rightBoxs">
          <img src="@/assets/images/Close@2x.png" alt="" @click="close" />
        </div>
      </div>
      <div>
        <el-form
          label-position="right"
          label-width="110px"
          :model="listData"
          :rules="rules"
          ref="listData"
        >
          <template v-for="(items, indexs) in listitem">
            <el-form-item
              :key="indexs"
              :label="items.label"
              :prop="items.prop"
              v-if="pdTypes(items)"
            >
              <el-radio-group
                v-if="items.scope === 'status'"
                v-model="listData[items.prop]"
              >
                <el-radio
                  v-for="(item, index) in items.options"
                  :key="index"
                  :label="item.value"
                  :disabled="statusPop === 2"
                  >{{ item.label }}</el-radio
                >
              </el-radio-group>
              <el-input
                :disabled="statusPop === 2"
                v-else-if="items.scope === 'textarea'"
                type="textarea"
                v-model="listData[items.prop]"
              ></el-input>
              <div v-else-if="items.scope === 'activeType'">
                <div :class="changeHeight ? 'ach' : 'clh'">
                  <div
                    v-for="(item, index) in zhType"
                    :key="index"
                    class="listBoxStys"
                  >
                    {{
                      item.educationName +
                      " - " +
                      item.projectName +
                      "-" +
                      item.businessName
                    }}
                    <i
                      class="el-icon-error closeIcons"
                      @click="closeType(item.id)"
                    ></i>
                  </div>
                </div>
                <el-button
                  size="mini"
                  v-if="zhType.length > 1"
                  @click="changeType"
                  >{{ changeHeight ? "展开" : "关闭" }}</el-button
                ><el-button
                  size="mini"
                  v-if="cauType.length > 0"
                  @click="allclear"
                  >清空</el-button
                >
              </div>
              <div
                v-else-if="items.scope === 'certificate'"
                style="display: flex; align-items: center"
              >
                <el-select
                  v-model="eduType"
                  placeholder="请选择教育类型"
                  @change="eduChange"
                >
                  <el-option
                    v-for="item in itemOption1"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <el-popover
                  placement="bottom"
                  trigger="click"
                  :disabled="eduType ? false : true"
                >
                  <el-checkbox
                    v-model="checkAll"
                    @change="handleCheckAllChange"
                    :indeterminate="isIndeterminate"
                    >全选</el-checkbox
                  >
                  <el-checkbox-group
                    v-model="cauType"
                    class="checkboxSty"
                    @change="handleCheckedCitiesChange"
                  >
                    <el-checkbox
                      v-for="(item, index) in itemOption2"
                      :label="item.id"
                      :key="index"
                      >{{
                        item.projectName + "-" + item.businessName
                      }}</el-checkbox
                    >
                  </el-checkbox-group>
                  <el-button
                    slot="reference"
                    style="margin-left: 12px"
                    @click="getMessage"
                    >请选择业务层次</el-button
                  >
                </el-popover>
                <span style="margin-left: 10px">注：可多选</span>
              </div>
              <el-select
                v-else-if="items.scope === 'select'"
                v-model="listData[items.prop]"
              >
                <el-option
                  v-for="(item, index) in items.options"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <div v-else-if="items.scope === 'showText'">
                <el-input
                  :disabled="statusPop === 2"
                  v-model="listData[items.prop]"
                ></el-input>
                <div>
                  {{
                    listData["streamingType"] === 1
                      ? items.ch
                      : listData["streamingType"] === 2 ||
                        listData["streamingType"] === 3
                      ? items.ch1
                      : ""
                  }}
                </div>
              </div>
              <div v-else>
                <el-input
                  :disabled="statusPop === 2"
                  v-model="listData[items.prop]"
                ></el-input>
                <div v-if="items.ch">{{ items.ch }}</div>
              </div>
            </el-form-item>
          </template>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button
          type="primary"
          v-if="statusPop !== 2"
          :loading="disabledBtn"
          @click="submit('listData')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      @closed="loadingClose"
      :visible.sync="disBoxs"
      width="440px"
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div slot="title" class="hearders">
        <div class="leftTitle">选择同步BL频道分类</div>
        <div class="rightBoxs">
          <img
            src="@/assets/images/Close@2x.png"
            alt=""
            @click="disBoxs = false"
          />
        </div>
      </div>
      <div class="max-heightSty">
        <el-tree :props="props" :load="loadNode" lazy>
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <div
              class="radioSty"
              @click.stop="cataid = data.cataid"
              :style="
                data.cataid === cataid ? 'border-color:#F56C6C!important;' : ''
              "
            >
              <transition name="fade">
                <div v-if="data.cataid === cataid" class="isActives"></div>
              </transition>
            </div>
            <span>{{ node.label }}</span>
          </span>
        </el-tree>
      </div>
      <!-- <div class="mat-TOP">
        <el-radio-group v-model="streamAddType">
          <el-radio :label="1">正式</el-radio>
          <el-radio :label="2">测试</el-radio>
        </el-radio-group>
      </div> -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="disBoxs = false">取 消</el-button>
        <el-button @click="submitForms" :loading="disabledBtn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import searchBoxNew from "@/components/searchBoxNew";
import tableList from "@/components/tableList";
import pagination from "@/components/pagination";
export default {
  name: "Flow",
  components: { searchBoxNew, tableList, pagination },
  data() {
    return {
      isIndeterminate: false,
      checkAll: false,
      disBoxs: false, //弹窗Bool
      changeHeight: true,
      loading: false, //当前表单加载是否加载动画
      navText: {
        title: "流地址管理",
        index: 0,
        ch: "条",
        num: true,
        border: true,
        choice: true,
        addHide: false,
        openCheckMore: true,
        backFatherBtn: {
          status: false,
          title: "未定义",
        },
      },
      // 表单
      tableSet: [
        {
          label: "流地址编码",
          prop: "code",
          hidden: true,
        },
        {
          label: "流地址名称",
          prop: "streamingName",
          hidden: true,
          scope: "editInfo",
        },
        {
          label: "直播/录播/回放地址",
          prop: "streamingType",
          prop1: "liveUrl",
          prop2: "recordingVideoId",
          prop3: "playbackUrl",
          hidden: true,
          scope: "urlStatus",
        },
        {
          label: "适用业务层级",
          prop: "businessList",
          hidden: true,
          scope: "mapTypesBUS",
        },
        {
          label: "视频类型",
          prop: "streamingType",
          hidden: true,
          scope: "sectionTypes",
          width: "100px",
        },
        // {
        //   label: "流地址类型",
        //   prop: "streamingAddressType",
        //   hidden: true,
        //   scope: "streamType",
        // },
      ],
      tableData: [], //表单数据
      //搜索
      formList: [
        {
          prop: "educationTypeId",
          placeholder: "教育类型",
          scope: "educationType",
        },
        {
          prop: "businessId",
          placeholder: "业务层次",
          scope: "businessLevel",
          edu: "educationTypeId",
        },
        {
          prop: "streamingType",
          placeholder: "视频类型",
          scope: "select",
          options: [
            {
              label: "直播",
              value: 1,
            },
            {
              label: "录播",
              value: 2,
            },
            {
              label: "回放",
              value: 3,
            },
          ],
        },
        // {
        //   prop: "streamingAddressType",
        //   placeholder: "流地址类型",
        //   scope: "select",
        //   options: [
        //     {
        //       label: "正式",
        //       value: 1,
        //     },
        //     {
        //       label: "测试",
        //       value: 2,
        //     },
        //   ],
        // },
        {
          prop: "streamingName",
          placeholder: "请输入流地址名称",
        },
      ],
      formData: {
        status: "0,1",
        pageSize: 10,
        pageNum: 1,
      },
      total: 0, //一共多少条
      options1: [],
      options2: [],
      courseProjectType: [],
      itemOption1: [],
      itemOption2: [],
      eduType: "",
      cauType: [],
      zhType: [],
      // 弹窗字段
      listitem: [
        {
          label: "适用业务层级",
          scope: "certificate",
        },
        {
          label: "",
          scope: "activeType",
        },
        {
          label: "视频类型",
          prop: "streamingType",
          scope: "select",
          options: [
            {
              label: "直播",
              value: 1,
            },
            {
              label: "录播",
              value: 2,
            },
            {
              label: "回放",
              value: 3,
            },
          ],
        },
        {
          label: "流地址名称",
          prop: "streamingName",
          scope: "showText",
          ch: "注：请填写第三方直播间的直播名称",
          ch1: "注：请填写与节相关的名称",
        },
        {
          label: "录播地址",
          prop: "recordingVideoId",
          hide: "one",
        },
        {
          label: "回放地址",
          prop: "playbackUrl",
          hide: "three",
        },
        {
          label: "直播间频道号",
          prop: "liveChannelNumber",
          hide: "two",
          ch: "注：请填写第三方直播间的频道号",
        },
        {
          label: " 推流地址",
          prop: "livePushUrl",
          hide: "two",
        },
        {
          label: " 直播拉流（播放）地址",
          prop: "livePullUrl",
          hide: "two",
        },
        {
          label: "直播地址",
          prop: "liveUrl",
          hide: "two",
        },
        // {
        //   label: "流地址类型",
        //   prop: "streamingAddressType",
        //   scope: "select",
        //   options: [
        //     {
        //       label: "正式",
        //       value: 1,
        //     },
        //     {
        //       label: "测试",
        //       value: 2,
        //     },
        //   ],
        // },
        {
          label: "描述",
          prop: "introduce",
          scope: "textarea",
        },
      ],
      //   弹窗数据
      listData: {},
      statusPop: -1,
      dialogVisible: false,
      //表单验证
      rules: {
        streamingType: [
          {
            required: true,
            message: "请选择视频类型",
            trigger: ["change", "blur"],
          },
        ],
        streamingName: [
          { required: true, message: "请输入流地址名称", trigger: "blur" },
        ],
        liveChannelNumber: [
          { required: true, message: "请输入直播间频道号", trigger: "blur" },
        ],
        // livePushUrl: [
        //   { required: true, message: "请输入推流地址", trigger: "blur" },
        // ],
        // livePullUrl: [
        //   { required: true, message: "请输入直播拉流（播放）地址", trigger: "blur" },
        // ],
        liveUrl: [
          { required: true, message: "请输入直播地址", trigger: "blur" },
        ],
        recordingVideoId: [
          { required: true, message: "请输入录播地址", trigger: "blur" },
        ],
        playbackUrl: [
          { required: true, message: "请输入回放地址", trigger: "blur" },
        ],
        // streamingAddressType: [
        //   {
        //     required: true,
        //     message: "请选择流地址类型",
        //     trigger: ["change", "blur"],
        //   },
        // ],
      },
      props: {
        label: "text",
        children: "children",
      },
      cataid: "",
      // streamAddType: "",
      disabledBtn: false,
    };
  },
  watch: {
    cauType: function () {
      this.changeTypes();
    },
  },
  mounted() {
    this.search();
    this.initOptions();
  },
  activated() {
    this.search();
    this.initOptions();
  },
  methods: {
    PLDel() {
      if (!this.$refs.tableList.allCheckData.length) {
        this.$message.warning("请勾选数据");
        return;
      }
      const ary = this.$refs.tableList.allCheckData.map((item) => {
        return item.id;
      });
      this.del(ary, true);
    },
    allclear(){
      this.cauType = []
      this.handleCheckedCitiesChange()
    },
    handleCheckedCitiesChange() {
      let nid = this.itemOption2.map((item) => {
        return item.id;
      });
      this.checkAll = nid.every((item) => {
        if (this.cauType.includes(item)) {
          this.isIndeterminate = true;
          return true;
        } else {
          return false;
        }
      });
      if (this.cauType.length) {
        this.isIndeterminate = true;
      } else {
        this.isIndeterminate = false;
      }
      if (this.checkAll) {
        this.isIndeterminate = false;
      }
    },
    handleCheckAllChange(val) {
      if (val) {
        let nid = this.itemOption2.map((item) => {
          return item.id;
        });
        let arrays = this.cauType.concat(nid);
        this.cauType = this.setFunc(arrays);
        this.isIndeterminate = false;
      } else {
        let nid = this.itemOption2.map((item) => {
          return item.id;
        });
        let newArr = [];
        this.cauType.forEach((item) => {
          if (!nid.includes(item)) {
            newArr.push(item);
          }
        });
        this.cauType = newArr;
        console.log(this.cauType);
        if (this.cauType.length) {
          this.isIndeterminate = true;
        } else {
          this.isIndeterminate = false;
        }
      }
    },
    setFunc(arr) {
      var arrays = [];
      for (let i = 0; i < arr.length; i++) {
        if (!arrays.includes(arr[i])) {
          arrays.push(arr[i]);
        }
      }
      return arrays;
    },
    loadingClose() {
      this.disabledBtn = false;
    },
    loadNode(node, resolve) {
      console.log(node);
      if (node.level === 0) {
        this.$api.obtainpolyvvideosignlistCata({ parentid: 0 }).then((res) => {
          return resolve(res.rows);
        });
      }
      if (node.level >= 1) {
        this.$api
          .obtainpolyvvideosignlistCata({ parentid: node.data.cataid })
          .then((res) => {
            return resolve(res.rows);
          });
      }
    },
    submitForms() {
      if (!this.cataid) {
        this.$message.warning("请勾选需要同步的频道");
        return;
      }
      this.$modal.loading("正在同步数据，请稍等...");
      this.disabledBtn = true;
      this.$api
        .uploadPolyvvideocata({
          cataid: this.cataid,
          // streamingAddressType: this.streamAddType,
        })
        .then((res) => {
          this.$message.success("同步成功");
          this.search();
          this.disBoxs = false;
        })
        .catch(() => {
          this.disabledBtn = false;
        })
        .finally(() => {
          this.$modal.closeLoading();
        });
    },
    moreActive() {
      this.cataid = "";
      // this.streamAddType = 1;
      this.disBoxs = true;
    },
    getMessage() {
      if (!this.eduType) {
        this.$message.warning("请先选择教育类型");
      }
    },
    changeType() {
      this.changeHeight = !this.changeHeight;
    },
    changeTypes() {
      var arrays = [];
      this.cauType.map((item) => {
        this.courseProjectType.map((items, indexs) => {
          if (items.id === item) {
            arrays.push(items);
          }
        });
      });
      this.zhType = arrays;
    },
    eduChange() {
      var array = [];
      this.options2.map((item) => {
        if (item.educationId === this.eduType) {
          array.push(item);
        }
      });
      this.itemOption2 = array;
      this.handleCheckedCitiesChange();
    },
    initOptions() {
      this.$api.inquireCourseEducationType({ status: 1 }).then((res) => {
        var array = [];
        res.rows.map((item) => {
          array.push({ label: item.educationName, value: item.id });
        });
        this.options1 = array;
      });
      this.$api.inquirebusinessList({ status: 1 }).then((res) => {
        this.courseProjectType = res.rows;
        this.options2 = res.rows;
      });
    },
    editInfo(v) {
      this.addClick(v, 0);
    },
    pdTypes(items) {
      if (items.hide === "two") {
        if (this.listData.streamingType === 1) {
          return true;
        } else {
          return false;
        }
      }
      if (items.hide === "three") {
        if (this.listData.streamingType === 3) {
          return true;
        } else {
          return false;
        }
      }
      if (items.hide === "one") {
        if (this.listData.streamingType === 2) {
          return true;
        } else {
          return false;
        }
      }
      return true;
    },
    search(int) {
      this.loading = true;
      if (int === 1) {
        this.formData.pageNum = 1;
      }
      if (int === 2) {
        this.formData = {
          status: "0,1",
          pageSize: 10,
          pageNum: 1,
        };
      }
      this.$api
        .inquireCourseStreaming(this.formData)
        .then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.navText.index = res.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    init() {
      this.search(2);
    },
    closeType(id) {
      this.cauType.splice(this.cauType.indexOf(id), 1);
      this.handleCheckedCitiesChange();
    },
    del(v, m) {
      this.$alert(
        "确定删除此内容？<br />内容删除后将无法恢复，请慎重考虑",
        "提示",
        {
          dangerouslyUseHTMLString: true,
        }
      )
        .then(() => {
          var data = {
            ids: m ? v : [v.id],
            status: -1,
          };
          this.$api.editCourseBusinessCourseStreaming(data).then((res) => {
            this.$message.success("删除成功");
            this.$refs.tableList.clearMoreActive();
            this.search();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    addClick(v, int) {
      if (v === undefined) {
        this.statusPop = 1;
        this.listData = {
          status: 1,
          // streamingAddressType: 1,
        };
        this.eduType = "";
        this.cauType = [];
        this.zhType = [];
      } else {
        this.statusPop = int;
        this.listData = JSON.parse(JSON.stringify(v));
        this.eduType = "";
        this.$api.obtainCourseStreamingsq(v.id).then((res) => {
          var array = [];
          res.data.map((items, indexs) => {
            array.push(items.businessId);
          });
          this.cauType = array;
        });
      }
      this.itemOption1 = JSON.parse(JSON.stringify(this.options1));
      this.itemOption2 = JSON.parse(JSON.stringify(this.options2));
      this.$nextTick(() => {
        this.changeHeight = true;
        this.$refs.listData.clearValidate();
      });
      this.dialogVisible = true;
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.rulesTableSumbit();
        } else {
          return false;
        }
      });
    },
    rulesTableSumbit() {
      this.disabledBtn = true;
      var pushRays = [];
      this.zhType.map((item) => {
        pushRays.push({
          businessId: item.id,
          educationTypeId: item.educationId,
          projectId: item.projectId,
        });
      });
      var dataInfos = {
        status: 1,
        streamingName: this.listData.streamingName,
        businessList: pushRays,
        introduce: this.listData.introduce,
        // streamingAddressType: this.listData.streamingAddressType,
      };
      if (this.listData.streamingType === 1) {
        dataInfos.streamingType = 1;
        dataInfos.liveUrl = this.listData.liveUrl;
        dataInfos.liveChannelNumber = this.listData.liveChannelNumber;
        dataInfos.livePullUrl = this.listData.livePullUrl;
        dataInfos.livePushUrl = this.listData.livePushUrl;
      }
      if (this.listData.streamingType === 2) {
        dataInfos.streamingType = 2;
        dataInfos.recordingVideoId = this.listData.recordingVideoId;
      }
      if (this.listData.streamingType === 3) {
        dataInfos.streamingType = 3;
        dataInfos.playbackUrl = this.listData.playbackUrl;
      }
      if (this.statusPop === 1) {
        this.$api
          .appCourseStreaming(dataInfos)
          .then((res) => {
            this.$message.success("新增成功");
            this.dialogVisible = false;
            this.search();
          })
          .catch(() => {
            this.disabledBtn = false;
          });
      }
      if (this.statusPop === 0) {
        dataInfos.id = this.listData.id;
        this.$api
          .editCourseBusinessCourseStreaming(dataInfos)
          .then((res) => {
            this.$message.success("修改成功");
            this.dialogVisible = false;
            this.search();
          })
          .catch(() => {
            this.disabledBtn = false;
          });
      }
    },
    close() {
      this.dialogVisible = false;
    },
    handleSizeChange(v) {
      this.formData.pageSize = v;
      this.formData.pageNum = 1;
      this.search();
    },
    handleCurrentChange(v) {
      this.formData.pageNum = v;
      this.search();
    },
  },
};
</script>

<style lang="less" scoped>
.mat-TOP {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
.radioSty {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid #666;
  margin-right: 6px;
  position: relative;
  transition: all 0.2s;
}
.isActives {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #f56c6c;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
.max-heightSty {
  max-height: 500px;
  overflow-y: auto;
}
/deep/.el-button {
  border-radius: 8px;
}
/deep/.el-dialog {
  border-radius: 8px;
  .el-dialog__header {
    padding: 0;
    .hearders {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0px 18px 0px 20px;
      border-bottom: 1px solid #e2e2e2;
      .leftTitle {
        font-size: 14px;
        font-weight: bold;
        color: #2f4378;
      }
      .rightBoxs {
        display: flex;
        align-items: center;
        img {
          width: 14px;
          height: 14px;
          margin-left: 13px;
          cursor: pointer;
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0;
    .dialog-footer {
      padding: 0px 40px;
      height: 70px;
      border-top: 1px solid #e2e2e2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  }
}
.imgBox {
  width: 100%;
  // height: 210px;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  padding: 8px 8px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  .imgLabel {
    flex: 1;
    width: 100%;
    border: 1px dotted #e2e2e2;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    .msPhoto {
      display: flex;
      justify-content: center;
      align-items: center;
      max-width: 100%;
      max-height: 270px;
      img {
        max-width: 100%;
        max-height: 270px;
      }
    }
    .imgbbx {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      i {
        font-weight: bold;
        margin: 14px 0;
        font-size: 24px;
      }
    }
  }
  p {
    margin: 5px 0px;
  }
}
.checkboxSty {
  max-height: 210px;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.listBoxStys {
  flex-shrink: 0;
  padding: 0px 10px;
  border-radius: 8px;
  border: 1px solid #eee;
  margin-right: 10px;
  margin-bottom: 6px;
}
.closeIcons {
  color: red;
  cursor: pointer;
  margin-left: 6px;
}
.ach {
  display: flex;
  align-items: center;
  overflow: hidden;
}
.clh {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
</style>