technology_web1/src/components/foot.vue

<template>
  <div id="foot">
    <div class="foot">
      <div class="w_1200 footflex">
        <el-image class="image" src="/src/assets/unit.png" fit="fill" />
        <el-col :span="12" class="foot_1">
          <div class="footTitle"><span>业务洽谈：0431-81165166</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>企业邮箱：jlpstm@126.com</span></div>
          <div class="footTitle">地 址：长春朝阳区前进大街1244号（吉林省科技厅科研园）</div>
          <div class="footTitle">版权所有：Copyright©2007-2023 吉林省创新指导中心 │ 吉ICP备14005689号</div>
          <div class="footTitle">技术支持：长春市福瑞科技有限公司</div>
        </el-col>
        <el-col :span="3" class="foot_2">
          <div class="footTop">关于我们</div>
          <div class="footTitle footflex1"><span class="footSpan">关于我们</span> <span class="footSpan">意见反馈</span></div>
          <div class="footTitle footflex1"><span class="footSpan">联系我们</span> <span class="footSpan">法律条款</span></div>
        </el-col>
        <el-col :span="4" class="foot_3 footflex">
          <el-image class="image" src="/src/assets/code.png" fit="fill" />
          <el-image class="image" src="/src/assets/code.png" fit="fill" />
        </el-col>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
.foot {
  padding: 5px 0;
  font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
    'Segoe UI Symbol', 'Noto Color Emoji';
  font-variant: tabular-nums;
  line-height: 1.5715;
  font-feature-settings: 'tnum', 'tnum';

  .image {
    width: 78px;
    height: 78px;
  }

  .footTitle {
    margin: 5px 0 0 0;

    .footSpan {
      margin-bottom: 3px;
    }
  }

  .footTop {
    font-size: 18px;
    margin-bottom: 12px;
  }
}

.footflex {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.footflex1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>