修改公司简介的字体大小

yangyin

2024-10-24 a9fa5ae6253d50fafe0671c007f6e25be3eb5042

 src/views/project/ch/home/AboutUs.vue

@@ -1,258 +1,146 @@
<template>
   <div class="w100 h100 box-border text-[14px] bg-[#f7f8fa] relative pr-[32px] pb-[50px] pl-[32px] pt-[42px] w100">
      <div class="about-us-container">
         <div class="about-us-box flex flex-col">
            <h1>公司简介</h1>
			
            <div class="us">
               <div class="flex-1 min-w-0">
                  <h2>关于上海拉瓦锡卡文智能科技有限公司</h2>
                  <p>
                     上海拉瓦锡卡文智能科技有限公司，是一家基于AI专注数据处理、数据分析、数据治理的科技公司（WaterData+AI），致力于为水务行业提供WI水务智能应用，是智慧水务数据的挖掘者。
                  </p>
                  <!-- <div class="mt-[12px] flex" v-for="(item, index) in state.usList" :key="item.ID">
                     <i :class="`ywifont ${item.icon} mr-[8px] !text-[18px]`"></i>
                     <div class="info_item_title">{{ item.title }}</div>
                     <div class="info_item">{{ item.content }}</div>
                  </div> -->
               </div>
					
   <div class="w100 h100 bg-[#fff] overflow-auto">
      <div class="container">
         <div class="set_introduce">
            <h3 class="mod-m-title">公司简介</h3>
            <div class="brief-text-box">
               <h4>关于上海拉瓦锡卡文智能科技有限公司</h4>
               <p class="desc">
                  一家充满活力与创新精神的新兴科技企业，正以其前沿的人工智能（AI）技术和先进的大型语言模型（LLM）引领数据处理、数据分析和数据治理的新浪潮。我们致力于将智能科技与水务行业深度融合，打造水务智能（WI）的创新应用，实现WaterData与AI的无缝对接。
               </p>
            </div>
         </div>
         <div class="set_mission">
            <div class="flex items-center">
               <div class="w100 h100">
                  <img src="/static/images/about/1.webp" class="w-[580px] h-[315px]" />
               </div>
               <div class="w100 h100 px-[30px]">
                  <div class="title">愿景及使命</div>
                  <div class="desc">
                     我们的使命是推动水务企业的数字化转型，通过智慧水务数据的深度挖掘，为行业带来革命性的变化。我们不仅是技术的先行者，更是智慧水务领域的探索者和实践者，致力于将数据的力量转化为水务行业的新动能，为可持续发展的未来贡献我们的智慧和力量。
                  </div>
               </div>
            </div>
         </div>
         <div class="set_mission">
            <div class="flex items-center">
               <div class="w100 h100 px-[30px]">
                  <div class="title">名字起源</div>
                  <div class="desc">
                     上海拉瓦锡卡文智能科技有限公司的名字，是对两位化学巨匠——安托万-洛朗·拉瓦锡（Antoine-Laurent de
                     Lavoisier）和亨利·卡文迪许（Henry
                     Cavendish）的致敬。这两位科学家在化学领域的贡献，尤其是对水的组成和性质的研究，为化学工业革命奠定了基础。
                  </div>
               </div>
               <div class="w100 h100">
                  <img src="/static/images/about/2.webp" class="w-[580px] h-[315px]" />
               </div>
            </div>
         </div>
         <div class="set_mission">
            <div class="flex items-center">
               <div class="w100 h100">
                  <img src="/static/images/about/3.webp" class="w-[580px] h-[315px] object-cover" />
               </div>
               <div class="w100 h100 px-[30px]">
                  <div class="title">现代化学之父</div>
                  <div class="desc">
                     拉瓦锡被誉为现代化学之父，他通过精确的实验方法，推翻了当时流行的燃素说，证明了空气由氧气和氮气组成，并确立了质量守恒定律。他的实验装置设计精巧，能够精确测量化学反应中物质的质量变化，从而证明了水可以分解成氢和氧。拉瓦锡的这些发现，不仅推动了化学科学的发展，也为后来的工业革命提供了理论基础。
                     卡文迪许则以其对氢气的研究而闻名。他通过实验分离出了氢气，并对其性质进行了详细研究，证明了氢气是水的组成部分之一。卡文迪许的这一发现，进一步证实了水的组成，并为后来的化学工业提供了重要的原材料。
                  </div>
               </div>
            </div>
         </div>
         <div class="set_bottom">
            <p>
               上海拉瓦锡卡文智能科技有限公司以这两位科学家的名字命名，体现了公司对智慧水务数据价值挖掘和应用的使命和远景。公司致力于通过先进的技术和创新的方法，实现水务数据的智能化管理和优化，以提高水资源的利用效率和管理水平。正如拉瓦锡和卡文迪许通过他们的实验和发现开启了化学的新纪元，上海拉瓦锡卡文智能科技有限公司也希望通过其在智慧水务领域的努力，开启水务数据价值应用的新篇章，为水资源的可持续利用和环境保护做出贡献。
            </p>
         </div>
      </div>
   </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue';

let state = reactive({
   usList: [
      {
         ID: 1,
         icon: 'ywicon-dianhua',
         title: '联系方式:',
         content: '023-98657832',
      },
      {
         ID: 2,
         icon: 'ywicon-youxiang',
         title: '商务合作:',
         content: 'smh@eventech.cn',
      },
      {
         ID: 3,

         icon: 'ywicon-dizhi',
         title: '公司地址:',
         content: '上海时闵行区江月路999号奇亚特科技园1号楼615室',
      },
   ],
   rcList: ['/static/images/wave/copyright.jpg'],
});
</script>
<script setup lang="ts"></script>
<style scoped lang="scss">
.about-us-container {
   --title: 14px;
   --normal: 12px;
   --gap: 12px;
   --maxWidth: 864px;
   --color: #5dccef;
   --color2: #76d587;
   width: 100%;
   display: flex;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
   -ms-flex-direction: column;
   flex-direction: column;
   box-sizing: border-box;
   padding: 0 24px;
   height: calc(100% - 42px);
   align-items: center;
   overflow-y: auto;
   .about-us-box {
      margin: auto 0;
      max-width: 864px;
      padding: 24px 0;
      h1 {
         font-size: 18px;
         font-weight: 600;
         color: #333;
      }
      .product_item {
         box-sizing: border-box;
         min-width: 0;
         width: calc(50% - var(--gap) / 2);
         padding: var(--gap);
         border-radius: 8px;
         color: #fff;

         .product_item:first-child {
            color: var(--color);
         }
         .product_item:nth-child(2) {
            color: var(--color2);
            --hoverColor: rgba();
         }
      }
      .row_layout {
         display: -webkit-box;
         display: -ms-flexbox;
         display: flex;
         align-items: flex-start;
         gap: var(--gap);
         .code {
            padding: 0 2px;
            -ms-flex-item-align: center;
            align-self: center;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-align: end;
            -ms-flex-align: end;
            align-items: flex-end;
            p {
               font-size: 12px;
               margin-top: 4px;
               color: #ffffffd9;
               white-space: nowrap;
            }
         }
      }
      .content {
         flex: 1;
         min-width: 0;

         h2 {
            font-size: var(--title);
            line-height: 30px;
            font-weight: 600;
            font-family: Poppins;
         }
         p {
            text-align: justify;
            text-align-last: start;
            font-size: var(--normal);
            line-height: 18px;
            font-weight: 400;
            margin-top: 4px;
            color: hsla(0, 0%, 100%, 0.8);
         }
      }
      .btn {
         box-sizing: border-box;
.container {
   width: 1200px;
   margin: 0px auto;
   .set_introduce {
      height: 212px;
      width: 100%;
      position: relative;
      margin-top: 36px;
      box-sizing: border-box;
      .mod-m-title {
         width: 100%;
         padding: 0px 8px;
         height: 30px;
         overflow: hidden;
         text-align: center;
         font-size: 30px;
         font-variant: normal;
         color: #2a2e2e;
         font-family: 'TencentSansw7';
      }
      .brief-text-box {
         width: 100%;
         margin-top: 52px;
         text-align: center;
         position: relative;
         h4 {
            font-size: 20px;
            color: #2a2e2e;
            letter-spacing: 0;
            text-align: left;
            line-height: 36px;
            font-weight: 400;
            margin: 16px auto;
         }
         .desc {
            font-size: 16px;
            color: #5f6464;
            letter-spacing: 0;
            text-align: left;
            line-height: 24px;
            width: 100%;
            margin: 16px auto;
         }
      }
   }
   .set_mission {
      background: #fbfbfb;
      height: 315px;
      width: 100%;
      position: relative;
      margin-top: 56px;
      box-sizing: border-box;
      .title {
         font-size: 20px;
         color: #2a2e2e;
         letter-spacing: 0;
         line-height: 36px;
      }
      .desc {
         font-size: 16px;
         color: #5f6464;
         letter-spacing: 0;
         line-height: 25px;
         border-radius: 4px;
         background-color: #fff;
         cursor: pointer;
         display: flex;
         margin-top: 4px;
         align-items: center;
         justify-content: center;
         gap: 8px;
         font-size: 12px;
         margin-left: unset;
         text-decoration: none;

         -webkit-transition: all 0.3s;
         -o-transition: all 0.3s;
         transition: all 0.3s;
         font-size: 12px;
         white-space: nowrap;
         margin-top: 16px;
      }
      .column_layout {
   }
   .set_bottom {
      background-color: #fbfbfb;
      margin: 60px 0px;
      padding: 32px 0px;
      p {
         opacity: 1;
         display: flex;
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: column;
         -webkit-box-pack: justify;
         -ms-flex-pack: justify;
         justify-content: space-between;
         .top {
            display: flex;
            align-items: flex-start;
            gap: var(--gap);
         }
      }
      .us {
         margin-top: var(--gap);
         padding: var(--gap);
         min-width: 0;
         border-radius: 8px;
         background-color: #1d86ff;
         color: #fff;
         display: flex;
         align-items: center;
         gap: 24px;
         h2 {
            font-size: var(--title);
            line-height: 20px;
         }
         p {
            text-align: justify;
            -moz-text-align-last: start;
            text-align-last: start;
            font-size: var(--normal);
            line-height: 20px;
            margin-top: var(--gap);
            color: #ffffffd9;
         }
         .info_item_title {
            font-size: var(--normal);
            line-height: 20px;
            color: white;
            display: flex;
            font-weight: 800;
            align-items: center;
            margin-right: 4px;
         }
         .info_item {
            font-size: var(--normal);
            line-height: 20px;
            color: #ffffffd9;
            display: flex;
            align-items: center;
            margin-right: 4px;
         }
         .right {
            width: 200px;
            display: flex;

            align-items: center;
            flex-direction: column;
            .view {
               position: absolute;
               top: 0;
               left: 0;
               right: 0;
               bottom: 0;
               background-color: transparent;
               display: flex;
               align-items: center;
               justify-content: center;
               transition: background-color 0.2s;
               cursor: pointer;
               font-size: 12px;
               color: transparent;

               &:hover {
                  background-color: rgba(0, 0, 0, 0.7);
                  color: #fff;
               }
               i {
                  transition: color 0.2s;
                  margin-right: 4px;
               }
            }
         }
         font-size: 16px;
         color: #5f6464;
         letter-spacing: 0;
         line-height: 25px;
         text-align: left;
         box-sizing: border-box;
      }
   }
}
</style>
import item from 'element-plus/es/components/space/src/item';