Merge branch 'test' of http://47.103.154.90:83/r/WI/Web.V1.0 into test

wujingjing

2024-11-26 9c100512a92bf3ac2f1c8b739e843199a69cd411

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

@@ -1,17 +1,61 @@
<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="mt-[12px] w100 flex flex-wrap gap-[12px]">
               <div class="product_item row_layout">
                  <img src="/static/images/logo/logo-mini.svg" class="w-[30px] h-[30px]" />
                  <div class="content">
                     <h2>智能监控</h2>
                     <p>智能监控系统，可实时监控设备状态，并提供预警、报警、远程控制等功能。</p>
   <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>
@@ -19,51 +63,83 @@

<script setup lang="ts"></script>
<style scoped lang="scss">
.about-us-container {
   --title: 14px;
   --normal: 12px;
   --gap: 12px;
   --maxWidth: 864px;
   --color: #5dccef;

   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;
.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%;
         overflow: hidden;
         text-align: center;
         font-size: 30px;
         font-variant: normal;
         color: #2a2e2e;
         font-family: 'TencentSansw7';
      }
      .product_item {
         box-sizing: border-box;
         min-width: 0;
         width: calc(50% - var(--gap) / 2);
         padding: var(--gap);
         border-radius: 8px;
         color: #fff;
         background-color: var(--color);
         .product_item:first-child {
            color: #5dccef;
      .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;
         }
      }
      .row_layout {
         display: -webkit-box;
         display: -ms-flexbox;
   }
   .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;
         margin-top: 16px;
      }
   }
   .set_bottom {
      background-color: #fbfbfb;
      margin: 60px 0px;
      padding: 32px 0px;
      p {
         opacity: 1;
         display: flex;
         align-items: flex-start;
         gap: var(--gap);
         font-size: 16px;
         color: #5f6464;
         letter-spacing: 0;
         line-height: 25px;
         text-align: left;
         box-sizing: border-box;
      }
   }
}