yjxp-web/src/views/disasterRiskMonitor/expertDatabase.vue

<template>
  <div class="container">
    <van-search
        v-model="keywords"
        placeholder="请输入搜索关键词"
        :left-icon="searchImg"
        :right-icon="closeImg"
        @search="onSearch"
        class="common-search"
    />
    <van-dropdown-menu>
      <van-dropdown-item v-model="areaType" :options="columns" />
      <van-dropdown-item v-model="value2" :options="option2" />
    </van-dropdown-menu>

    <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
    >
      <div v-for="(item,index) in list" :key="item.id">
        <div class="person-box" @click="personInform(item)">
          <div class="circle">
            <img :src="onlineUser" alt="" />
          </div>
          <div style="display: flex">
            <div class="information-card">
              <div style="display: flex; margin-top: 10px;">
                <div style="font-weight: bold">{{ item.name }}</div>
                <div class="notOnline" style="color: #638dce">
                  {{ item.title }}
                </div>
              </div>
              <div style="font-size: 13px; margin-top: 5px; color: #979797">
                {{ item.unit }}
              </div>
              <div class="text-ellipsis" style="color: #979797; font-size: 13px">
                {{ item.position }}
              </div>
            </div>
            <img
              src="@/assets/images/expertDatabase/rightArrow.png"
              style="height: 30px; margin-right: 10px; margin-top: 40px"
            />
          </div>
        </div>
        <div class="link-top" />
      </div>
    </van-list>
  </div>
<!--  <expertinformation-->
<!--    v-if="isShowInform"-->
<!--    class="modal-overlay"-->
<!--  />-->
</template>

<script setup lang="ts">
import searchImg from "@/assets/images/search.png";
import closeImg from "@/assets/images/close.png";
import onlineUser from "@/assets/images/threePreventionResponsiblePerson/onlineUsers.png";
import offlineUser from "@/assets/images/threePreventionResponsiblePerson/offlineUsers.png";
import expertinformation from "@/views/disasterRiskMonitor/expertinformation.vue";

const router = useRouter();
const keywords = ref();
const areaType = ref("440900000");
const value2 = ref("a");
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { district_type } = toRefs<any>(
    proxy?.useDict("district_type")
);
const columns = computed(() => {
  let data = [{ text: "茂名市", value: "440900000" }];
  if (district_type.value && district_type.value.length > 0) {
    district_type.value.forEach(item => {
      data.push({ text: item.label, value: item.value });
    });
  }
  return data;
});
const option2 = [
  { text: "所有", value: "a" },
  { text: "自然灾害", value: "b" },
  { text: "事故灾难", value: "c" },
  { text: "公共卫生", value: "d" },
  { text: "社会安全", value: "e" },
  { text: "其他", value: "f" }
];
const list = ref([
  {
    id: "1",
    name: "谢和平",
    unit: "国务院学位委员会、深圳大学深地科学与绿色能源研究院",
    position: "委员、院长",
    title: "教授",
    expertType: "其它突发事件"
  },
  {
    id: "2",
    name: "谢和平",
    unit: "国务院学位委员会、深圳大学深地科学与绿色能源研究院",
    position: "委员、院长",
    title: "教授",
    expertType: "其它突发事件"
  },
  {
    id: "3",
    name: "谢和平",
    unit: "国务院学位委员会、深圳大学深地科学与绿色能源研究院",
    position: "委员、院长",
    title: "教授",
    expertType: "其它突发事件"
  },
  {
    id: "4",
    name: "谢和平",
    unit: "国务院学位委员会、深圳大学深地科学与绿色能源研究院",
    position: "委员、院长",
    title: "教授",
    expertType: "其它突发事件"
  },
  {
    id: "5",
    name: "谢和平",
    unit: "国务院学位委员会、深圳大学深地科学与绿色能源研究院",
    position: "委员、院长",
    title: "教授",
    expertType: "其它突发事件"
  }
]);
const loading = ref(false);
const finished = ref(false);
// const onLoad = () => {};

const personInform = item => {
  router.push({ name: "Expertinformation", query: { id: item.id } });
};
</script>

<style scoped lang="scss">
.container {
  height: calc(100vh - 55px);
  .van-dropdown-menu {
    :deep(.van-dropdown-menu__bar) {
      background: transparent;
      box-shadow: none;
    }
  }
}
.common-search {
  :deep(.van-field__left-icon) {
    .van-icon__image {
      width: 12px;
      height: 12px;
    }
  }
  :deep(.van-field__right-icon) {
    width: 30px;
    height: 30px;
    padding: 0;
    .van-icon__image {
      width: 30px;
      height: 30px;
    }
  }
}
.person-box {
  display: flex;
  flex-direction: row;
  padding-left: 8px;
  background-color: #ffffff;
}
.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #eaeaea;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-size: 15px;
  margin: 15px 5px 15px;
}
.information-card {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  width: 230px;
  margin-top: 2px;
}
.one {
  -webkit-line-clamp: 2; /* 限制显示的行数为2 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号表示被截断的部分 */
}
.notOnline {
  font-size: 12px;
  background-color: #f1f3fb;
  padding-left: 5px;
  height: 15px;
  width: 35px;
  padding-bottom: 18px;
  border-radius: 2px;
  color: #ffffff;
  margin-top: 5px;
  margin-left: 10px;
}
.text-ellipsis {
  margin-top: 3px;
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
}
.type-name {
  background-color: #eff2fc;
  padding: 3px 15px;
  font-size: 13px;
  color: #8d9bc8;
  margin-right: 3px;
  border-radius: 2px;
  &:nth-last-child {
    margin-right: 0;
  }
  margin-bottom: 3px;
}
.force-newline {
  margin-right: 100%; /* 足够大的值来触发换行 */
}
.link-top {
  height: 0.5px;
  border-top: solid #f2f2f2 1px;
}
.isOnline {
  background-color: limegreen;
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #f4f8fa;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  height: calc(100vh - 55px);
}
</style>