<template>
  <div class="publicContainerA">
    <div class="partTitleHM">项目展示列表</div>
    <div class="ConstrucClass">
      <div class="HeadContent">
        <el-form-item>
          <el-input v-model="queryParams.filieDescription" placeholder="请输入项目名称" style="width: 95%; margin: 15px auto" />
        </el-form-item>
      </div>
      <div class="ConstrucNr">
        <Vue3SeamlessScroll :list="listDataXm" :singleHeight="55" :singleWaitTime="1500" :hover="true" class="scroll">
          <div class="listXm" v-for="item in listDataXm">
            <img class="Icon_zp" :src="item.imgUrl" alt="" />
            <div class="XmName ellipsis">{{ item.name }}</div>
          </div>
        </Vue3SeamlessScroll>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';

import Architectural from '@/assets/newImgs/HMScreen/Architectural_icon.png';
const listDataXm = ref([
  {
    name: '老君堂中街22号楼',
    imgUrl: Architectural,
  },
  {
    name: '包公湖环湖路排水管网及道路海绵改造',
    imgUrl: Architectural,
  },
  {
    name: '宋都御街改造提升工程',
    imgUrl: Architectural,
  },
  {
    name: '西环路东京大道改造项目',
    imgUrl: Architectural,
  },
  {
    name: '复兴大道沿线积水点改造',
    imgUrl: Architectural,
  },
  {
    name: '开封新区9#雨水泵站',
    imgUrl: Architectural,
  },
  {
    name: '开封市2022年背街小巷改造工程项目',
    imgUrl: Architectural,
  },
  {
    name: '汴京路东郊沟雨水泵站新建项目',
    imgUrl: Architectural,
  },
]);
const AllData = reactive({
  queryParams: {},
});
const { queryParams } = toRefs(AllData);
</script>

<style lang="scss" scoped>
.publicContainerA {
  margin-top: 10px;
}
.ConstrucClass {
  width: 100%;
  height: calc(100vh - 530px);
  background: #003b6d;
  opacity: 0.8;
  .HeadContent {
    width: 100%;
    height: 65px;
    // background: red;
    align-items: center;
    line-height: 25px;
    margin-top: 2px;
  }
  .ConstrucNr {
    width: 100%;
    height: calc(100% - 17%);
    // background: #2790fb;
    .scroll {
      width: 95%;
      height: calc(100% - 1%);
      overflow: hidden;
      // display: inline-block;
      // background: red;
      margin: auto;
    }
    .listXm {
      position: relative;
      width: 95%;
      height: 50px;
      background: url('@/assets/newImgs/HMScreen/ujnasf.png') no-repeat;
      background-size: 100% 100%;
      display: flex;
      margin: 5px auto;
      .Icon_zp {
        width: 32px;
        height: 32px;
        position: relative;
        top: 9px;
        left: 20px;
        // background: red;
      }
      .XmName {
        position: relative;
        left: 70px;
        top: 15px;
        width: 335px;
        height: 50px;
        // background: red;
      }
    }
  }
}

:deep(.el-input__wrapper, .el-textarea__inner) {
  background: #11559b !important;
  box-shadow: 0 0 0 0.00521rem #066592 inset !important;
  border: 1px solid #2790fb;
  color: #fff !important;
}
</style>