|
|
@@ -0,0 +1,251 @@
|
|
|
+<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 {
|
|
|
+ .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>
|
