pbl-teacher-table/src/components/pages/appStore/views/appManagement.vue

<template>
  <div class="appManagement">
    <div class="ac_left">
      <saveCard title="最近使用" :data="recentUse" :type="1" @saveClick="openApp"/>
      <saveCard title="收藏" :data="collect" :type="0" @saveClick="openApp"/>
    </div>
    <div class="ac_right">
      <div class="ac_header">
        <div class="ac_h_top">
          <span class="ac_h_t_active"> <!-- class="ac_h_t_active"-->
            <svg
              width="20"
              height="20"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M14.0625 2.1875C11.9914 2.1875 10.3125 3.86643 10.3125 5.9375C10.3125 8.00857 11.9914 9.6875 14.0625 9.6875C16.1336 9.6875 17.8125 8.00857 17.8125 5.9375C17.8125 3.86643 16.1336 2.1875 14.0625 2.1875ZM11.5625 5.9375C11.5625 4.55679 12.6818 3.4375 14.0625 3.4375C15.4432 3.4375 16.5625 4.55679 16.5625 5.9375C16.5625 7.31821 15.4432 8.4375 14.0625 8.4375C12.6818 8.4375 11.5625 7.31821 11.5625 5.9375Z"
              />
              <path
                d="M2.5 3.75C2.5 3.05964 3.05964 2.5 3.75 2.5H8.125C8.81536 2.5 9.375 3.05964 9.375 3.75V8.125C9.375 8.81536 8.81536 9.375 8.125 9.375H3.75C3.05964 9.375 2.5 8.81536 2.5 8.125V3.75ZM3.75 3.75V8.125H8.125V3.75H3.75Z"
              />
              <path
                d="M2.5 11.875C2.5 11.1846 3.05964 10.625 3.75 10.625H8.125C8.81536 10.625 9.375 11.1846 9.375 11.875V16.25C9.375 16.9404 8.81536 17.5 8.125 17.5H3.75C3.05964 17.5 2.5 16.9404 2.5 16.25V11.875ZM3.75 11.875V16.25H8.125V11.875H3.75Z"
              />
              <path
                d="M10.625 11.875C10.625 11.1846 11.1846 10.625 11.875 10.625H16.25C16.9404 10.625 17.5 11.1846 17.5 11.875V16.25C17.5 16.9404 16.9404 17.5 16.25 17.5H11.875C11.1846 17.5 10.625 16.9404 10.625 16.25V11.875ZM11.875 16.25H16.25V11.875H11.875V16.25Z"
              />
            </svg>
            应用管理</span
          >
          <span @click="changeShowPage(1)">
            <svg
              width="20"
              height="20"
              viewBox="0 0 20 20"
              xmlns="http://www.w3.org/2000/svg"
            >
              <rect width="20" height="20" fill="white" />
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M9.70072 1.32632C9.88727 1.22456 10.1127 1.22456 10.2993 1.32632L17.1743 5.07632C17.3751 5.18584 17.5 5.39628 17.5 5.625V14.375C17.5 14.6037 17.3751 14.8142 17.1743 14.9237L10.2993 18.6737C10.1127 18.7754 9.88727 18.7754 9.70072 18.6737L2.82572 14.9237C2.62493 14.8142 2.5 14.6037 2.5 14.375V5.625C2.5 5.39628 2.62493 5.18584 2.82572 5.07632L9.70072 1.32632ZM3.75 6.79282V14.004L9.375 17.0722V14.1039L6.55344 12.4109C6.36519 12.298 6.25 12.0945 6.25 11.875V8.45949L3.75 6.79282ZM7.5 8.47887V10.7711L9.375 9.64613V7.35387L7.5 8.47887ZM10.625 7.35387V9.64613L12.5 10.7711V8.47887L10.625 7.35387ZM13.75 8.45949V11.875C13.75 12.0945 13.6348 12.298 13.4466 12.4109L10.625 14.1039V17.0722L16.25 14.004V6.79282L13.75 8.45949ZM15.668 5.67854L10 2.58693L4.33205 5.67854L6.8926 7.38557L9.67844 5.71407C9.87637 5.59531 10.1236 5.59531 10.3216 5.71407L13.1074 7.38557L15.668 5.67854ZM10 13.0211L11.9102 11.875L10 10.7289L8.08978 11.875L10 13.0211Z"
              />
            </svg>
            工作空间</span
          >
          <!-- <el-button
            type="primary"
            size="small"
            icon="el-icon-plus"
            style="position: absolute;right: 15px;"
            @click="addApp"
            >添加应用</el-button
          > -->
        </div>
        <div class="ac_h_banner" v-if="bannerObj">
          <img
            :src="bannerObj.poster"
            alt="banner图"
          />
        </div>
        <div class="ac_h_bottom">
          <div class="ac_h_b_typeList">
            <span
              :class="{ ac_h_b_typeList_active: showType === '' }"
              @click="changeType('')"
              >全部</span
            >
            <span
              v-for="item in typeList"
              :key="item.id"
              :class="{ ac_h_b_typeList_active: showType === item.id }"
              @click="changeType(item.id)"
              >{{ item.name }}</span
            >
          </div>
          <div class="ac_h_b_selectList">

            <el-select
              v-model="selectJuri"
              placeholder="请选择"
              @change="changeSelectType"
							style="width: 150px;margin-right: 10px;"
            >
              <el-option
                v-for="item in selectList"
                :key="item.index"
                :label="item.label"
                :value="item.index"
              ></el-option>
            </el-select>
						<el-input
              v-model="searchText"
              style="width: 200px;"
              placeholder="请输入应用名称"
              @keyup.enter.native="getData"
							clearable
            />
            <el-button
              type="primary"
              style="margin-left: 10px;"
              icon="el-icon-search"
              @click="getData"
              clearable
            ></el-button>
            <!-- <el-button type="primary" @click="releaseApp()">发布应用</el-button> -->
          </div>
        </div>
      </div>

      <div class="ac_content">
        <div
          class="ac_c_item"
          v-for="(item, index) in dataList"
          :key="item.id"
          @click="openApp(item)"
        >
          <div class="ac_c_i_top">
            <div class="ac_c_i_t_left">
              <svg
                v-if="
                  isImageOrSvg(
                    typeof item.json == 'object' ? item.json.icon : ''
                  ) === 0
                "
                t="1732605901531"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="4275"
                width="200"
                height="200"
              >
                <path
                  d="M179.2 153.6a51.2 51.2 0 0 0-51.2 51.2v128a51.2 51.2 0 0 0 51.2 51.2h128a51.2 51.2 0 0 0 51.2-51.2V204.8a51.2 51.2 0 0 0-51.2-51.2H179.2z m0-102.4h128a153.6 153.6 0 0 1 153.6 153.6v128a153.6 153.6 0 0 1-153.6 153.6H179.2a153.6 153.6 0 0 1-153.6-153.6V204.8a153.6 153.6 0 0 1 153.6-153.6z m0 614.4a51.2 51.2 0 0 0-51.2 51.2v128a51.2 51.2 0 0 0 51.2 51.2h128a51.2 51.2 0 0 0 51.2-51.2V716.8a51.2 51.2 0 0 0-51.2-51.2H179.2z m0-102.4h128a153.6 153.6 0 0 1 153.6 153.6v128a153.6 153.6 0 0 1-153.6 153.6H179.2a153.6 153.6 0 0 1-153.6-153.6V716.8a153.6 153.6 0 0 1 153.6-153.6z m611.84-403.4048a51.2 51.2 0 0 0-72.3968 0L646.144 232.2432a51.2 51.2 0 0 0 0 72.3968l72.448 72.3968a51.2 51.2 0 0 0 72.3968 0l72.3968-72.3968a51.2 51.2 0 0 0 0-72.3968L791.04 159.744z m72.3968-72.3968l72.3968 72.3968a153.6 153.6 0 0 1 0 217.2416l-72.3968 72.3968a153.6 153.6 0 0 1-217.2416 0l-72.3968-72.3968a153.6 153.6 0 0 1 0-217.2416l72.3968-72.3968a153.6 153.6 0 0 1 217.2416 0zM699.7504 896a51.2 51.2 0 0 1 0 102.4A162.1504 162.1504 0 0 1 537.6 836.2496v-110.8992A162.1504 162.1504 0 0 1 699.7504 563.2h110.8992a162.1504 162.1504 0 0 1 162.1504 162.1504v8.448a51.2 51.2 0 0 1-102.4 0v-8.448c0-33.024-26.7264-59.7504-59.7504-59.7504h-110.8992c-33.024 0-59.7504 26.7264-59.7504 59.7504v110.8992c0 33.024 26.7264 59.7504 59.7504 59.7504z"
                  fill="#2C6DD2"
                  p-id="4276"
                ></path>
                <path
                  d="M791.4496 160a51.2 51.2 0 0 0-72.3968 0l-72.448 72.3968a51.2 51.2 0 0 0 0 72.3968l72.448 72.3968a51.2 51.2 0 0 0 72.3968 0l72.3968-72.3968a51.2 51.2 0 0 0 0-72.3968l-72.3968-72.3968z"
                  fill="#20C997"
                  p-id="4277"
                ></path>
              </svg>
              <span
                v-if="
                  isImageOrSvg(
                    typeof item.json == 'object' ? item.json.icon : ''
                  ) === 1
                "
                v-html="item.json.icon"
              ></span>
              <el-image
                v-if="
                  isImageOrSvg(
                    typeof item.json == 'object' ? item.json.icon : ''
                  ) === 2
                "
                style="width: 100%; height: 100%"
                :src="item.json.icon"
                fit="cover"
              ></el-image>
            </div>
            <div class="ac_c_i_t_right">
              <div>{{ item.name }}</div>
              <span>{{ item.label}}</span>
              <!-- <span>@{{ item.username }}</span> -->
            </div>
            <div class="ac_c_i_t_popover">
              <div
                class="ac_c_i_t_p_box"
                v-if="editAppCard === item.id"
                v-click-outside="handleBlur"
              >
                <div
                  @click.stop="cancelCollectApp(item)"
                  v-if="collect.map(i => i.id).includes(item.id)"
                >
                  取消收藏
                </div>
                <div @click.stop="collectApp(item)" v-else>收藏</div>
                <div
                  @click.stop="copyApp(item)"
                  v-if="item.json && item.json.copy === '1'"
                >
                  复制
                </div>
                <div
                  @click.stop="updateApp(item)"
                  v-if="item.userid === userId"
                >
                  修改
                </div>
                <div @click.stop="delApp(item)" v-if="item.userid === userId">
                  删除
                </div>
              </div>
              <svg
                t="1732786015570"
                @click.stop="updateCard(item.id)"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                xmlns="http://www.w3.org/2000/svg"
                p-id="9199"
                width="200"
                height="200"
              >
                <path
                  d="M192 443.733333c-38.4 0-68.266667 29.866667-68.266667 68.266667 0 38.4 29.866667 68.266667 68.266667 68.266667s68.266667-29.866667 68.266667-68.266667c0-38.4-29.866667-68.266667-68.266667-68.266667zM512 443.733333c-38.4 0-68.266667 29.866667-68.266667 68.266667 0 38.4 29.866667 68.266667 68.266667 68.266667s68.266667-29.866667 68.266667-68.266667c0-38.4-29.866667-68.266667-68.266667-68.266667zM832 443.733333c-38.4 0-68.266667 29.866667-68.266667 68.266667 0 38.4 29.866667 68.266667 68.266667 68.266667s68.266667-29.866667 68.266667-68.266667c0-38.4-34.133333-68.266667-68.266667-68.266667z"
                  fill="#111111"
                  p-id="9200"
                ></path>
              </svg>
            </div>
          </div>
          <div class="ac_c_i_bottom">
            <div>{{ item.detail }}</div>
            <!-- <span @click="openApp(item.url)">{{ item.url }}</span> -->
          </div>
        </div>
        <div class="ac_c_empty" v-if="dataList.length === 0">
          <span>暂无数据...</span>
        </div>
      </div>
    </div>
    <addAppDialog
      ref="addAppDialogRef"
      :typeList="typeList"
      @success="addAppSuccess"
    />
  </div>
</template>

<script>
const clickOutside = {
  bind(el, binding) {
    // 在元素上绑定一个点击事件监听器
    el.clickOutsideEvent = function(event) {
      // 检查点击事件是否发生在元素的内部
      if (!(el === event.target || el.contains(event.target))) {
        // 如果点击事件发生在元素的外部，则触发指令绑定的方法,将点击的event数据传过去
        binding.value(event);
      }
    };
    // 在文档上添加点击事件监听器
    document.addEventListener("click", el.clickOutsideEvent);
  },
  unbind(el) {
    // 在元素上解除点击事件监听器
    document.removeEventListener("click", el.clickOutsideEvent);
  }
};
import addAppDialog from "../dialog/addAppDialog.vue";
import saveCard from "../dialog/saveCard.vue";
// import collectCard from "./dialog/collectCard.vue";
// import recentUseCard from "./dialog/recentUseCard.vue";
export default {
  components: {
    addAppDialog,
    saveCard
    // collectCard,
    // recentUseCard
  },
  directives: {
    "click-outside": clickOutside // 注册自定义指令
  },
  data() {
    return {
      showType: "",
      searchText: "",
      selectJuri: 3,
      typeList: [],
      selectList: [
        { index: 1, label: "我的" },
        { index: 2, label: "组织" },
        { index: 3, label: "所有人" }
      ],
      userId: this.$route.query["userid"],
      org: this.$route.query["org"],
      oid: this.$route.query["oid"],
      getDataLoading: false,
      dataList: [],
      recentUse: [],
      collect: [],
      editAppCard: null,
      bannerObj:null
    };
  },
  computed: {
    isImageOrSvg() {
      return value => {
        let _result = 0; //啥也不是
        if (value) {
          const svgPattern = /<svg.*<\/svg>/;
          const imagePattern = /\.(jpeg|jpg|gif|png|svg|bmp|webp)$/i; // 图片链接的正则表达式
          const urlPattern = /^(http|https):\/\/[^ "]+$/; // 网络地址的正则表达式

          if (svgPattern.test(value)) {
            _result = 1;
          } else if (urlPattern.test(value) && imagePattern.test(value)) {
            _result = 2;
          }
        }
        return _result;
      };
    }
  },
  methods: {
    changeType(newIndex) {
      let flag = this.showType === newIndex;
      this.showType = newIndex;
      if (!flag) {
        this.getData();
      }
    },
    changeSelectType() {
      this.getData();
    },
    getData() {
      this.getDataLoading = true;
      let params = {
        uid: this.userId, //用户ID
        name: this.searchText, //应用名称搜索
        label: "", //应用的标签搜索
        type: this.showType, //应用的类型
        juri: this.selectJuri, //应用权限 1:我的  2：组织内  3：所有人
        stand: "cn" //cn站还是hk站
      };

      this.ajax
        .get(this.$store.state.api + "select_appStore", params)
        .then(res => {
          this.getDataLoading = false;
          let _data = res.data[0];
          if (_data.length > 0) {
            _data.forEach(i => {
              if (i.json) {
                i.json = JSON.parse(i.json);
              }
            });
            this.dataList = _data;
          } else {
            this.dataList = [];
          }
        })
        .catch(err => {
          this.getDataLoading = false;
          console.log(err);
          this.$message.error("获取应用失败");
        });
    },
    addApp() {
      this.$refs.addAppDialogRef.open({ type: 1 });
    },
    releaseApp(){
      this.$message.info("发布应用")
    },
    updateApp(data) {
      this.$refs.addAppDialogRef.open({
        type: 2,
        form: {
          id: data.id,
          name: data.name,
          label: data.label,
          detail: data.detail,
          url: data.url,
          type: data.type,
          juri: data.juri,
          stand: data.stand,
          json: data.json
        }
      });
    },
    // 收藏APP
    collectApp(item) {
      this.editAppCard = null;
      this.insertSave(item, 0);
    },
    //复制app
    copyApp(item) {
      this.$confirm(`确定复制《${item.name}》这个应用吗？`, "复制", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let params = [
            {
              name: `${item.name}_copy`, //app名称
              userid: this.userId, //创建的用户ID
              label: item.label, //app标签
              detail: item.detail, //app简介
              url: item.url, //app链接
              type: item.type, //app类型
              juri: "1", //app权限 1:我的 2:组织 3:所有人
              stand: "cn", //语言
              json: JSON.stringify(item.json) //其他信息
            }
          ];
          this.ajax
            .post(this.$store.state.api + "insert_appStore", params)
            .then(res => {
              if (res.data == 1) {
                this.$message.success("复制成功");
                this.getData();
              } else {
                this.$message.error("复制失败");
              }
            })
            .catch(err => {
              console.log(err);
              this.$message.error("复制失败");
            });
        })
        .catch(_ => {
          console.log("取消复制");
        });
    },
    // 取消收藏
    cancelCollectApp(item) {
      this.editAppCard = null;
      let _data = this.collect.find(i => i.id === item.id);
      if (_data) {
        let params = [
          {
            sid: _data.sid
          }
        ];
        this.ajax
          .post(this.$store.state.api + "delete_appStoreSave", params)
          .then(res => {
            if (res.data) {
              this.$message.success("取消收藏成功");
            }
            this.getCollect();
          })
          .catch(e => {
            console.log(e);
            this.$message.error("取消收藏失败");
            this.getCollect();
          });
      } else {
        this.$message.error("取消收藏失败");
        this.getCollect();
      }
    },
    updateCard(id) {
      if (this.editAppCard === id) return (this.editAppCard = null);
      this.editAppCard = id;
    },
    handleBlur() {
      this.updateCard(null);
    },
    addAppSuccess(data, type) {
      if (type === 1) {
        //添加
        let params = [
          {
            name: data.name, //app名称
            userid: this.userId, //创建的用户ID
            label: data.label, //app标签
            detail: data.detail, //app简介
            url: data.url, //app链接
            type: data.type, //app类型
            juri: data.juri, //app权限 1:我的 2:组织 3:所有人
            stand: "cn", //语言
            json: JSON.stringify(data.json) //其他信息
          }
        ];
        this.ajax
          .post(this.$store.state.api + "insert_appStore", params)
          .then(res => {
            if (res.data == 1) {
              this.$message.success("添加成功");
              this.$refs.addAppDialogRef.close(true);
              this.getData();
            } else {
              this.$message.error("添加失败");
              this.$refs.addAppDialogRef.loading = false;
            }
          })
          .catch(err => {
            console.log(err);
            this.$message.error("添加失败");
          });
      } else if (type === 2) {
        let params = [
          {
            aid: data.id,
            name: data.name, //app名称
            userid: this.userId, //创建的用户ID
            label: data.label, //app标签
            detail: data.detail, //app简介
            url: data.url, //app链接
            type: data.type, //app类型
            juri: data.juri, //app权限 1:我的 2:组织 3:所有人
            stand: "cn", //语言
            json: JSON.stringify(data.json) //其他信息
          }
        ];
        this.ajax
          .post(this.$store.state.api + "update_appStore", params)
          .then(res => {
            if (res.data == 1) {
              this.$message.success("修改成功");
              this.$refs.addAppDialogRef.close(true);
              this.getData();
            } else {
              this.$message.error("修改失败");
              this.$refs.addAppDialogRef.loading = false;
            }
          })
          .catch(err => {
            console.log(err);
            this.$message.error("修改失败");
          });
      }
    },
    getTypeList() {
      let params = {
        suserid: this.userId, //用户ID
        sorg: this.org,
        soid: this.oid,
        sstand: "cn"
      };

      this.ajax
        .get(this.$store.state.api + "select_appStoreType", params)
        .then(res => {
          let data = res.data[0];
          if (data.length > 0) {
            this.typeList = data;
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.error("获取应用类型失败");
        });
    },
    openApp(item,type=0) {
      window.open(item.url, "_blank");
      if (!(this.recentUse.length > 0 && item.id === this.recentUse[0].id) && type===0) {
        this.insertSave(item, 1);
      }
    },
    resetData() {
      this.searchText = "";
      this.selectJuri = 3;
      this.showType = "";
      this.getData();
    },
    getRecentUse() {
      let params = {
        uid: this.userId,
        type: 1,
        limit: 10
      };

      this.ajax
        .get(this.$store.state.api + "select_appStoreSave", params)
        .then(res => {
          let data = res.data[0];
          if (data.length > 0) {
            data.forEach(i => {
              if (i.json) {
                i.json = JSON.parse(i.json);
              }
            });
            this.recentUse = data;
          } else {
            this.recentUse = [];
          }
        })
        .catch(err => {
          console.log(err);
          console.log("获取最近使用失败");
          // this.$message.error("获取收藏应用失败")
        });
    },
    getCollect() {
      let params = {
        uid: this.userId,
        type: 0,
        limit: 0
      };
      this.ajax
        .get(this.$store.state.api + "select_appStoreSave", params)
        .then(res => {
          let data = res.data[0];
          if (data.length > 0) {
            data.forEach(i => {
              if (i.json) {
                i.json = JSON.parse(i.json);
              }
            });
            this.collect = data;
          } else {
            this.collect = [];
          }
        })
        .catch(err => {
          console.log(err);
          this.$message.error("获取收藏应用失败");
        });
    },
    insertSave(item, type) {
      let params = [
        {
          uid: this.userId,
          type: type,
          aid: item.id,
          json: ""
        }
      ];

      this.ajax
        .post(this.$store.state.api + "insert_appStoreSave", params)
        .then(res => {
          if (res.data) {
            if (type === 0) {
              this.$message.success("收藏成功");
              this.getCollect();
            } else if (type === 1) {
              this.getRecentUse();
            }
          }
        })
        .catch(err => {
          console.log(err);
          if (type === 0) this.$message.error("收藏失败");
        });
    },
    delApp(item) {
      this.$confirm(
        `确定要删除《${item.name}》这个应用吗，删除后无法找回！`,
        `确定删除应用`,
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          let params = [
            {
              uid: this.userId,
              aid: item.id
            }
          ];
          this.ajax
            .post(this.$store.state.api + "delete_appStore", params)
            .then(res => {
              if (res.data) {
                this.$message.success("删除成功");
                this.getData();
              } else {
                this.$message.error("删除失败");
              }
            })
            .catch(err => {
              console.log(err);
              this.$message.error("删除失败");
            });
        })
        .catch(() => {
          console.log("取消删除");
        });
    },
    changeShowPage(newPage) {
      this.$emit("changeShowCard", newPage);
    },
    getBanner(){
      let params = {
        uid:this.userId,
        oid:this.oid,
        org:this.org,
        type:4
      }

      this.ajax.get(this.$store.state.api+"select_bannerByoidORorg",params).then(res=>{
        let _data = res.data[0];
        if(_data[0]){
          this.bannerObj = _data[0];
        }else{
          this.bannerObj = null
        }
      }).catch(e=>{
        console.log("获取banner图失败")
        console.log(e)
      })
    }
  },
  mounted() {
    this.getTypeList();
    this.getData();
    this.getCollect();
    this.getRecentUse();
    this.getBanner()
  }
};
</script>

<style scoped>
.appManagement {
  width: 100vw;
  height: 100vh;
  background-color: #f2f4f7;
  margin: 0;
  overflow: auto;
  box-sizing: border-box;
  padding: 20px;
  display: flex;
  justify-content: space-between;
}

.ac_left {
  /* width: 280px;
  min-width: 280px; */
  width: clamp(150px,12vw,280px);
  min-width: 150px;
  margin-right: 20px;
  height: 100%;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  padding: 10px;
  overflow: auto;
}

.ac_right {
  flex: 1;
  min-width: 800px;
  height: 100%;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}

.ac_header {
  width: 100%;
  height: auto;
  border-radius: 5px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
	background-color: #fff;
}

.ac_h_top {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 15px;
  border-bottom: 1px solid #eeeeee;

  position: relative;
  justify-content: center;
}

.ac_h_top > span {
  font-size: 22px;
  position: relative;
  margin-right: 25px;
  cursor: pointer;
	display: flex;
	align-items: center;
}

.ac_h_top > span>svg{
	width: 22px;
	height: 22px;
	fill: #1A1A1A;
	margin-right: 10px;
}

.ac_h_t_active{
	color: #0354D7;
}

.ac_h_t_active>svg{
	fill: #0354D7 !important;
}

/* .ac_h_t_active::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  border-radius: 4px;
  background-color: #409eff;
  left: 0;
  bottom: -5px;
} */

.ac_h_banner {
  width: 100%;
  height: clamp(100px,20vh,300px);
  border-radius: 5px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 10px;
}

.ac_h_banner > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}

.ac_h_bottom {
  width: 100%;
  height: auto;
  padding: 10px 15px 10px 15px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ac_h_b_typeList {
  width: calc(100% - 400px);
  height: auto;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.ac_h_b_typeList > span {
  font-size: 18px;
  margin-right: 20px;
  margin-top: 10px;
  margin-bottom: 5px;
  cursor: pointer;
}

.ac_h_b_typeList_active {
  color: #007aff;
}

.ac_h_b_selectList {
  margin-left: 15px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.ac_content {
  width: 100%;
  flex: 1;
  height: auto;
  margin-top:10px;
  overflow: auto;
	min-height: 200px;
}

.ac_c_item {
  width: calc(100% / 5 - (15px * 4) / 5);
  height: 250px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  padding: 15px;
  margin-right: 15px;
  margin-bottom: 15px;
  float: left;
  cursor: pointer;
  font-size: calc(14px,20vh,16px);
}

@media screen and (min-width: 1400px) {
  .ac_c_item {
    width: calc(100% / 5 - (15px * 4) / 5) !important;
  }
  .ac_c_item:nth-child(5n) {
    margin-right: 0px !important;
    /* background-color: red; */
  }
}

@media screen and (max-width: 1380px) {
  .ac_c_item {
    width: calc(100% / 4 - (15px * 3) / 4) !important;
  }

  .ac_c_item:nth-child(4n) {
    margin-right: 0px !important;
  }

  /* .ac_c_item:nth-child(5n) {
    margin-right: 0 !important;
  } */
}

@media screen and (max-width: 1080px) {
  .ac_c_item {
    width: calc(100% / 3 - (15px * 2) / 3) !important;
  }

  .ac_c_item:nth-child(5n) {
    margin-right: 15px !important;
  }

  .ac_c_item:nth-of-type(4n) {
    margin-right: 15px !important;
  }

  .ac_c_item:nth-child(3n) {
    margin-right: 0 !important;
  }
}

.ac_c_empty {
  width: 100%;
  height: 40%;
  display: flex;
  box-sizing: border-box;
  padding-top: 2%;
  justify-content: center;
  /* align-items: center; */
}

.ac_c_i_top {
  width: 100%;
  height: 50px;
  display: flex;
  position: relative;
  /* flex-direction: column; */
  /* justify-content: space-evenly; */
  /* background-color: red */
}

.ac_c_i_t_popover {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 0;
  top: 0;
}

.ac_c_i_t_popover svg {
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.ac_c_i_t_p_box {
  position: absolute;
  height: auto;
  top: 100%;
  right: 0;
  padding: 8px;
  border-radius: 8px 0 8px 8px;
  background-color: #fff;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  width: auto;
}

.ac_c_i_t_p_box > div {
  width: 80px;
  height: 30px;
  cursor: pointer;
  transition: 0.3s;
  font-weight: bold;
  font-size: 0.9em;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}

.ac_c_i_t_p_box > div:hover {
  background-color: #f2f4f7;
}

.ac_c_i_t_left {
  width: 50px;
  height: 50px;
  border-radius: 8px;
  margin-right: 10px;
  box-sizing: border-box;
  padding: 5px;
}

.ac_c_i_t_left > svg {
  width: 100%;
  height: 100%;
}

.ac_c_i_t_left > span {
  width: 100%;
  height: 100%;
  display: block;
}

.ac_c_i_t_left > span >>> svg {
  width: 100%;
  height: 100%;
}

.ac_c_i_t_right {
  width: calc(100% - 60px);
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.ac_c_i_t_right > div {
  font-size: 1.4em;
  font-weight: bold;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ac_c_i_t_right > span {
  font-size: 1.1em;
  /* font-weight: bold; */
  color: #8991a1;
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ac_c_i_bottom {
  width: 100%;
  height: calc(100% - 60px);
  margin-top: 15px;
}

.ac_c_i_bottom > div {
  font-size: 1em;
  color: #8991a1;
  width: 100%;
  height: calc(100%);
  /* 第四行溢出显示... */
  display: -webkit-box;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
}

.ac_c_i_bottom > span {
  margin-top: 5px;
  font-size: 1em;
  color: #409eff;
  overflow: hidden;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
</style>