企业详情样式调整； 企业详情加载范围瀑布图；

shuishen

2024-11-08 a8b22d9a1bbee15caa378c7c3af519db51c97efc

 src/views/companyInfo/components/box/fireSource.vue

@@ -12,126 +12,123 @@
import publicContent from './publicContent.vue'
import { getAssetsFile } from 'utils/utils'
let data = reactive({
    companyInfo: {}
  companyInfo: {}
})

let companyInfoList = ref([
    {
        id: 1,
        name: 'address',
        title: '单位所在地',
        content: '',
    },
    {
        id: 2,
        name: 'lng',
        title: '中心经度',
        content: '',
  {
    id: 1,
    name: 'address',
    title: '单位所在地',
    content: '',
  },
  {
    id: 2,
    name: 'lng',
    title: '中心经度',
    content: '',

    },
    {
        id: 3,
        name: 'lat',
        title: '中心纬度',
        content: '',
    },
    {
        id: 4,
        name: 'name',
        title: '行业体制',
        content: '',
    },
    {
        id: 5,
        name: 'personInCha',
        title: '负责人',
        content: '',
    }
  },
  {
    id: 3,
    name: 'lat',
    title: '中心纬度',
    content: '',
  },
  {
    id: 4,
    name: 'name',
    title: '行业体制',
    content: '',
  },
  {
    id: 5,
    name: 'personInCha',
    title: '负责人',
    content: '',
  }
])


onMounted(() => {
    data.companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
    console.log(data.companyInfo)
    companyInfoList.value.forEach(item => {
        data.companyInfo[item.name] && (item.content = data.companyInfo[item.name])
  data.companyInfo = JSON.parse(localStorage.getItem('companyInfo'))
  console.log(data.companyInfo)
  companyInfoList.value.forEach(item => {
    data.companyInfo[item.name] && (item.content = data.companyInfo[item.name])

    });
  })
})


</script>

<template>
    <public-content>
        <template #content>
            <div class="data-content">
  <div class="data-content w100 h100">

                <div class="content-firmIntro">
                    <!-- <div>{{ data.companyInfo.firmIntro }}</div> -->
                    {{ data.companyInfo.firmIntro }}
                </div>
    <div class="content-firmIntro">
      <!-- <div>{{ data.companyInfo.firmIntro }}</div> -->
      {{ data.companyInfo.firmIntro }}
    </div>

                <div class="company-info">
                    <div class="company-info-item" v-for="item in companyInfoList" :key="item.id">
                        <el-row>
                            <el-col :span="8">
                                <div class="company-info-title">{{ item.title }}</div>
                            </el-col>
                            <el-col :span="16">
                                <div class="company-info-content">{{ item.content }}</div>
                            </el-col>
                        </el-row>
                    </div>
                </div>
    <div class="company-info">
      <div class="company-info-item" v-for="item in companyInfoList" :key="item.id">
        <el-row>
          <el-col :span="8">
            <div class="company-info-title">{{ item.title }}</div>
          </el-col>
          <el-col :span="16">
            <div class="company-info-content">{{ item.content }}</div>
          </el-col>
        </el-row>
      </div>
    </div>

                <div class="company-info-image">
                    <img :src="data.companyInfo.image_urls" alt="">
                    <!-- {{ "图片" }} -->
                </div>
    <div class="company-info-image">
      <img :src="data.companyInfo.image_urls" alt="">
      <!-- {{ "图片" }} -->
    </div>


            </div>
        </template>
    </public-content>
  </div>
</template>

<style lang="scss" scoped>
.data-content {
    color: #fff;
  padding: 10px;
  color: #fff;
}

.content-firmIntro {
    height: 300px;
    overflow-x: hidden;
    // 隐藏滚动条
    scrollbar-width: none;
  height: 300px;
  overflow-x: hidden;
  // 隐藏滚动条
  scrollbar-width: none;
}

.company-info {
    margin-top: 10px;
    border-top: #dfdcdc 2px solid;
    // background-color: pink;
  margin-top: 10px;
  border-top: #dfdcdc 2px solid;
  // background-color: pink;
}

.company-info-item {
    margin-top: 20px;
  margin-top: 20px;
}

.company-info-title {
    font-weight: bold;
  font-weight: bold;
}

.company-info-content {
    font-size: 14px;
  font-size: 14px;

}

.company-info-image {
    margin-top: 20px;
    width: 100%;
    height: 200px;
    // background-color: pink;
    text-align: center;
  margin-top: 20px;
  width: 100%;
  height: 200px;
  // background-color: pink;
  text-align: center;
}
</style>