technique_web3/src/views/main/six.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <el-col :span="24" class="one">
          <el-image class="image" :src="news" fit="fill" />
        </el-col>
        <el-col :span="24" class="two">
          <div class="w_1200">
            <el-col :span="24" class="two_1">
              <el-row class="two_1_1">
                <el-col :span="3" class="left">按地区：</el-col>
                <el-col :span="20" class="right" v-if="oneShow">
                  <a-button
                    class="title"
                    v-for="(item, index) in cityList"
                    :key="index"
                    type="link"
                    size="samll"
                    @click="toSelect(item, 'one')"
                    :class="[item.is_active ? 'show' : '']"
                  >
                    {{ item.label }}
                  </a-button>
                </el-col>
                <el-col :span="20" class="right" v-else>
                  <a-button
                    class="title"
                    v-for="(item, index) in cityList.slice(0, 10)"
                    :key="index"
                    type="link"
                    size="samll"
                    @click="toSelect(item, 'one')"
                    :class="[item.is_active ? 'show' : '']"
                  >
                    {{ item.label }}
                  </a-button>
                </el-col>
                <el-col :span="1" class="button">
                  <span v-if="!oneShow" @click="oneShow = true">
                    更多
                    <el-icon><ArrowDown /></el-icon>
                  </span>
                  <span v-else @click="oneShow = false">
                    收起
                    <el-icon><ArrowUp /></el-icon>
                  </span>
                </el-col>
              </el-row>
              <div class="two_1_2">
                <a-input class="input" v-model:value="value" placeholder="中试平台/实验室名称" />
                <a-input class="input" v-model:value="value" placeholder="建设主体" />
                <a-input class="input" v-model:value="value" placeholder="运营主体" />
                <a-input class="input" v-model:value="value" placeholder="服务产业领域" />
                <a-button class="button" type="primary">检索</a-button>
              </div>
            </el-col>
            <el-col :span="24" class="two_2">
              <el-row :gutter="16">
                <el-col :span="6" v-for="(item, index) in list" :key="index" @click="toView(item)">
                  <div class="list">
                    <el-col :span="24" class="name textOne">
                      <el-tooltip effect="dark" :content="item.name" placement="top">
                        {{ item.name || '暂无名称' }}
                      </el-tooltip>
                    </el-col>
                    <el-col :span="24" class="other_1">
                      <span>建设主体：</span>
                      {{ item.build || '暂无建设主体' }}
                    </el-col>
                    <el-col :span="24" class="other_1">
                      <span>运营主体：</span>
                      {{ item.operate || '暂无运营主体' }}
                    </el-col>
                    <el-col :span="24" class="other_1">
                      <span>服务产业领域：</span>
                      {{ item.field || '暂无服务产业领域' }}
                    </el-col>
                    <el-col :span="24" class="other_1">
                      <span>地址：</span>
                      {{ item.address || '暂无地址' }}
                    </el-col>
                    <el-col :span="24" class="other_1">
                      <span>联系人：</span>
                      {{ item.contacts || '暂无联系人' }}
                    </el-col>
                    <el-col :span="24" class="other_1">
                      <span>联系电话：</span>
                      {{ item.phone || '暂无联系电话' }}
                    </el-col>
                  </div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="24" class="two_3">
              <el-pagination
                background
                layout="total, prev, pager, next"
                :page-sizes="[10, 20, 50, 100, 200]"
                :total="total"
                :page-size="limit"
                v-model:current-page="currentPage"
                @current-change="changePage"
                @size-change="sizeChange"
              >
              </el-pagination>
            </el-col>
          </div>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
// 图片引入
import news from '/images/news.png'
// 加载中
const loading = ref(false)
// 是否展开
const oneShow = ref(false)
// 路由
const router = useRouter()
const cityList = ref([
  { label: '全部', value: '0' },
  { label: '南关区', value: '1' },
  { label: '朝阳区', value: '2' },
  { label: '高新区', value: '3' },
  { label: '宽城区', value: '4' },
  { label: '二道区', value: '5' },
  { label: '净月区', value: '6' },
  { label: '绿园区', value: '7' },
  { label: '九台区', value: '8' },
  { label: '双阳区', value: '9' },
  { label: '中韩示范区', value: '10' }
])
// 列表
const list = ref([
  {
    name: '粉末冶金新材料中试基地',
    build: 'xxxx有限公司',
    operate: 'xxxx有限公司',
    field: '新材料',
    address: '长春市蔚山路333号',
    contacts: '张先生',
    phone: '13334566543'
  },
  {
    name: '药物开发中试平台',
    build: 'xxxx有限公司',
    operate: 'xxxx有限公司',
    field: '新材料',
    address: '长春市蔚山路333号',
    contacts: '张先生',
    phone: '13334566543'
  },
  {
    name: '高端化学制剂实验室',
    build: 'xxxx有限公司',
    operate: 'xxxx有限公司',
    field: '新材料',
    address: '长春市蔚山路333号',
    contacts: '张先生',
    phone: '13334566543'
  },
  {
    name: '粉末冶金新材料中试基地',
    build: 'xxxx有限公司',
    operate: 'xxxx有限公司',
    field: '新材料',
    address: '长春市蔚山路333号',
    contacts: '张先生',
    phone: '13334566543'
  },
  {
    name: '粉末冶金新材料中试基地',
    build: 'xxxx有限公司',
    operate: 'xxxx有限公司',
    field: '新材料',
    address: '长春市蔚山路333号',
    contacts: '张先生',
    phone: '13334566543'
  },
  {
    name: '粉末冶金新材料中试基地',
    build: 'xxxx有限公司',
    operate: 'xxxx有限公司',
    field: '新材料',
    address: '长春市蔚山路333号',
    contacts: '张先生',
    phone: '13334566543'
  },
  {
    name: '粉末冶金新材料中试基地',
    build: 'xxxx有限公司',
    operate: 'xxxx有限公司',
    field: '新材料',
    address: '长春市蔚山路333号',
    contacts: '张先生',
    phone: '13334566543'
  },
  {
    name: '粉末冶金新材料中试基地',
    build: 'xxxx有限公司',
    operate: 'xxxx有限公司',
    field: '新材料',
    address: '长春市蔚山路333号',
    contacts: '张先生',
    phone: '13334566543'
  }
])
let skip = 0
let limit = inject('limit')
const total = ref(0)
// 请求
onMounted(async () => {
  loading.value = true
  await search()
  loading.value = false
})
const search = async () => {}
// 查看
const toView = (item) => {
  router.push({ path: '/platform/detail', query: { id: item.id || item._id } })
}
const currentPage = ref(1)
// 分页
const changePage = (page = currentPage.value) => {
  search({ skip: (page - 1) * limit, limit: limit })
}
const sizeChange = (limits) => {
  limit = limits
  currentPage.value = 1
  search({ skip: 0, limit: limit })
}
</script>
<style scoped lang="scss">
.main {
  .one {
    .image {
      width: 100%;
      height: 200px;
    }
  }

  .two {
    .two_1 {
      background: #ffffff;
      border-radius: 10px;
      padding: 15px;
      margin: 10px 0 0 0;

      .two_1_1 {
        display: flex;
        align-items: center;
        padding: 10px 0;
        border-bottom: #9d9898 1px dashed;

        .left {
          background: #2280ff;
          border-radius: 15px;
          line-height: 26px;
          color: #fff;
          text-align: center;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-family: PingFangSC-Medium;
        }

        .right {
          .show {
            color: #2374ff !important;
          }
          .title {
            color: #666;
            font-size: $global-font-size-16;
            line-height: 15px;
            margin: 0 10px;
            display: inline-block;
            overflow: hidden;
            text-decoration: none;
          }

          .title:hover {
            color: #2374ff;
          }
        }
        .button {
          color: #2374ff;
          font-size: $global-font-size-14;
          cursor: pointer;
        }
      }
      .two_1_2 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 10px 0 0 0;
        .input {
          margin: 0 5px 0 0;
        }
        .button {
          margin: 0 0 0 5px;
        }
      }
    }
    .two_2 {
      .list {
        padding: 15px;
        border: 1px solid #f2f4f6;
        border-radius: 8px;
        margin: 0 0 15px 0;
        .name {
          color: #337ab7;
          font-size: $global-font-size-20;
          font-weight: bold;
          display: inline-block;
          margin: 0 0 8px 0;
        }

        .name:hover {
          color: #2374ff;
          cursor: pointer;
        }

        .other_1 {
          font-family: 'PingFangSC-Light', 'Microsoft YaHei', 'WenQuanYi Micro Hei', arial,
            sans-serif;
          font-size: $global-font-size-16;
          font-weight: normal;
          color: #666;
        }

        .other_1:hover {
          color: #2374ff;
          cursor: pointer;
        }
      }
    }
    .two_3 {
      display: flex;
      flex-direction: row-reverse;
      padding: 20px;
    }
  }
}
</style>