web_src/vuepages/pages/ros-hmci/components/AppBanner.vue

@@ -6,7 +6,7 @@
       <div class="info-div">
         <span class="info2">智能操作软件库和工具  构建人工智能应用程序</span>
       </div>
-      <span class="info3">ROS hmci</span>
+      <span class="info3">ROS - hmci</span>
     </div>
   </div>
 </template>
@@ -34,8 +34,10 @@ export default {
   position: relative;
   top: 0px;
   background: url(/img/ros-hmci/mbz605.png);
-  background-size: 100% 100%;
-  height: 541px;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: 600px;
   width: 100%;
 }
 
@@ -43,9 +45,10 @@ export default {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  position: absolute;
-  top: 104px;
-  left: 18%;
+  top: 165px;
+  width: 1200px;
+  margin: 0 auto;
+  position: relative;
 }
 
 .info>*:not(:first-child) {
@@ -59,14 +62,15 @@ export default {
   justify-content: center;
   width: 486.09px;
   height: 53px;
-  background-image: linear-gradient(150.44deg, #00e850 0%, #0100be 100%);
+  background-image:linear-gradient(150.44deg,#0feb8d 0%,#50c6a6 100%);
   border-radius: 28px;
 }
 
 .info1 {
   font-family: sucaijishikufangti;
-  color: #ffffff;
-  font-size: 45px;
+  font-weight:700;
+  color:#444b66;
+  font-size:40px;
   letter-spacing: 7px;
 }
 
@@ -79,8 +83,8 @@ export default {
 
 .info3 {
   font-family: Alibaba PuHuiTi;
-  color: #ffffff;
-  font-size: 40px;
-  letter-spacing: 8px;
+  color:#444b66;
+  font-size:36px;
+  letter-spacing: 4px;
 }
 </style>

web_src/vuepages/pages/ros-hmci/components/NavigationBar.vue

@@ -1,45 +1,47 @@
 <template>
-  <div class="navbar justify-center flex-row items-center">
-    <div id="nav1" class="flex-row items-center nb_section" @mouseover="addLineToImgSrc(1)"
-      @mouseout="removeLineFromImgSrc(1)" :class="{ 'active-route': $route.name === 'HomePage' }">
-      <img class="nb_img" :src="imgSrc(1)" />
-      <a @click="gotoHomePage" class="nb_txt">首页</a>
-    </div>
-    <div class="line"></div>
-    <div id="nav2" class="flex-row items-center nb_section" @mouseover="addLineToImgSrc(2)"
-      @mouseout="removeLineFromImgSrc(2)" :class="{ 'active-route': $route.name === 'OSSystem' }">
-      <img class="nb_img" :src="imgSrc(2)" />
-      <a @click="gotoOSSystem" class="nb_txt">操作系统</a>
-    </div>
-    <div class="line"></div>
-    <div id="nav3" class="flex-row items-center nb_section" @mouseover="addLineToImgSrc(3)"
-      @mouseout="removeLineFromImgSrc(3)" :class="{ 'active-route': $route.name === 'OpenApp' }">
-      <img class="nb_img" :src="imgSrc(3)" />
-      <a @click="gotoOpenApp" class="nb_txt">开源应用</a>
-    </div>
-    <div class="line"></div>
-    <div id="nav4" class="flex-row items-center nb_section" @mouseover="addLineToImgSrc(4)"
-      @mouseout="removeLineFromImgSrc(4)" :class="{ 'active-route': $route.name === 'OpenDataset' }">
-      <img class="nb_img" :src="imgSrc(4)" />
-      <a @click="gotoOpenData" class="nb_txt">社区数据集</a>
-    </div>
-    <div class="line"></div>
-    <div id="nav5" class="flex-row items-center nb_section" @mouseover="addLineToImgSrc(5)"
-      @mouseout="removeLineFromImgSrc(5)" :class="{ 'active-route': $route.name === 'OpenModel' }">
-      <img class="nb_img" :src="imgSrc(5)" />
-      <a @click="gotoOpenModel" class="nb_txt">社区智能模型</a>
-    </div>
-    <div class="line"></div>
-    <div id="nav6" class="flex-row items-center nb_section" @mouseover="addLineToImgSrc(6)"
-      @mouseout="removeLineFromImgSrc(6)" :class="{ 'active-route': $route.name === 'CommunitySource' }">
-      <img class="nb_img" :src="imgSrc(6)" />
-      <a @click="gotoComunitySource" class="nb_txt">社区资源</a>
-    </div>
-    <div class="line"></div>
-    <div id="nav7" class="flex-row items-center nb_section" @mouseover="addLineToImgSrc(7)"
-      @mouseout="removeLineFromImgSrc(7)" :class="{ 'active-route': $route.name === 'HelpCenter' }">
-      <img class="nb_img" :src="imgSrc(7)" />
-      <a @click="gotoHelpCenter" class="nb_txt">帮助中心</a>
+  <div class="navbar">
+    <div class="nanbar_cont justify-center flex-row items-center">
+      <div id="nav1" class="flex-row items-center nb_section" @mouseover="addLineToImgSrc(1)"
+        @mouseout="removeLineFromImgSrc(1)" :class="{ 'active-route': $route.name === 'HomePage' }">
+        <img class="nb_img" :src="imgSrc(1)" />
+        <a @click="gotoHomePage" class="nb_txt">首页</a>
+      </div>
+      <div class="line"></div>
+      <div id="nav2" class="flex-row items-center nb_section" @mouseover="addLineToImgSrc(2)"
+        @mouseout="removeLineFromImgSrc(2)" :class="{ 'active-route': $route.name === 'OSSystem' }">
+        <img class="nb_img" :src="imgSrc(2)" />
+        <a @click="gotoOSSystem" class="nb_txt">操作系统</a>
+      </div>
+      <div class="line"></div>
+      <div id="nav3" class="flex-row items-center nb_section" @mouseover="addLineToImgSrc(3)"
+        @mouseout="removeLineFromImgSrc(3)" :class="{ 'active-route': $route.name === 'OpenApp' }">
+        <img class="nb_img" :src="imgSrc(3)" />
+        <a @click="gotoOpenApp" class="nb_txt">开源应用</a>
+      </div>
+      <div class="line"></div>
+      <div id="nav4" class="flex-row items-center nb_section" @mouseover="addLineToImgSrc(4)"
+        @mouseout="removeLineFromImgSrc(4)" :class="{ 'active-route': $route.name === 'OpenDataset' }">
+        <img class="nb_img" :src="imgSrc(4)" />
+        <a @click="gotoOpenData" class="nb_txt">社区数据集</a>
+      </div>
+      <div class="line"></div>
+      <div id="nav5" class="flex-row items-center nb_section" @mouseover="addLineToImgSrc(5)"
+        @mouseout="removeLineFromImgSrc(5)" :class="{ 'active-route': $route.name === 'OpenModel' }">
+        <img class="nb_img" :src="imgSrc(5)" />
+        <a @click="gotoOpenModel" class="nb_txt">社区智能模型</a>
+      </div>
+      <div class="line"></div>
+      <div id="nav6" class="flex-row items-center nb_section" @mouseover="addLineToImgSrc(6)"
+        @mouseout="removeLineFromImgSrc(6)" :class="{ 'active-route': $route.name === 'CommunitySource' }">
+        <img class="nb_img" :src="imgSrc(6)" />
+        <a @click="gotoComunitySource" class="nb_txt">社区资源</a>
+      </div>
+      <div class="line"></div>
+      <div id="nav7" class="flex-row items-center nb_section" @mouseover="addLineToImgSrc(7)"
+        @mouseout="removeLineFromImgSrc(7)" :class="{ 'active-route': $route.name === 'HelpCenter' }">
+        <img class="nb_img" :src="imgSrc(7)" />
+        <a @click="gotoHelpCenter" class="nb_txt">帮助中心</a>
+      </div>
     </div>
   </div>
 </template>
@@ -134,15 +136,15 @@ export default {
 
 .nb_txt {
   font-family: PingFang SC;
-  color: #ffffff;
+  color:#4d4d4d;
   font-size: 18px;
   text-align: center;
 }
 
 .nb_img {
-  width: 20px;
-  height: 20px;
-  margin-right: 5px;
+  width: 17px;
+  height: 17px;
+  margin-right: 7px;
 }
 
 .line {
@@ -152,20 +154,20 @@ export default {
   width: 0px;
   height: 15.4px;
   border: 1px solid;
-  border-color: #ffffff;
+  border-color: rgba(77, 77, 77, 0.28);
 }
 
 .navbar {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   flex-direction: row;
-  display: inline-flex;
+  background-color:rgba(205, 219, 228, 0.5);
+  width: 100%;
+  height: 108px;
   position: absolute;
+  left: 0;
   bottom: 0px;
-  background-color: rgba(255, 255, 255, 0.15);
-  height: 108px;
-  width: 100%;
-  backdrop-filter: blur(20px);
   z-index: 100;
 }
 
@@ -185,4 +187,8 @@ export default {
   background-image: linear-gradient(150.44deg, #00e850 0%, #0100be 100%);
   border-radius: 28px;
 }
+.nanbar_cont{
+  width: 1200px;
+  margin: 0 auto;
+}
 </style>

web_src/vuepages/pages/ros-hmci/components/helpCollaps.vue

@@ -7,9 +7,27 @@
         <span class="self-start text_9 font_3">常见问题</span>
       </div>
 
-      <el-collapse-item title="此处为常见问题1标题" name="1">
+      <el-collapse-item title="如何将项目加入到人机协同智能操作系统社区？" name="1">
         <div class="section_10">
-          <span class="font_5">此处为常见问题1内容</span>
+          <span class="font_5">给您的项目赋予标签ros-hmci-app(开源应用)，ros-hmci-datasets(社区数据集)，ros-hmci-models(社区智能模型)。</span>
+        </div>
+      </el-collapse-item>
+
+      <el-collapse-item title="如何使用人机协同智能操作系统？" name="5">
+        <div class="section_10">
+          <span class="font_5">在操作系统下载列表中选择您需要的操作系统下载至本地，解压zip的包，得到iso镜像文件后进行安装使用。</span>
+        </div>
+      </el-collapse-item>
+      
+      <el-collapse-item title="如何发布新的资源？" name="6">
+        <div class="section_10">
+          <span class="font_5">在社区资源栏中点击资源发布，按格式填写需要发布的资源后提交，等待管理员审核完成后即可在社区资源找到您发布的资源。</span>
+        </div>
+      </el-collapse-item>
+      
+      <el-collapse-item title="是否能发布其他平台的资源？" name="7">
+        <div class="section_10">
+          <span class="font_5">可以。</span>
         </div>
       </el-collapse-item>
       <div class="coll_tag">

web_src/vuepages/pages/ros-hmci/views/CommunitySource.vue

@@ -41,19 +41,23 @@
 
 
 
-            <div class="flex-row justify-between items-center section_7 pos_3">
-                <div class="flex-col justify-start items-start relative group_4">
-                    <input class="font_1 text_15" outline:none type="text" placeholder="请输入资源名称以搜索" v-model="searchQuery" />
-                    <img class="image_11 pos_4" src="/img/ros-hmci/bcea28a03624dcba382543662dbb0a2c.png" />
-                </div>
-                <div class="flex-row space-x-28">
-                    <!-- <div class="flex-row items-center space-x-6">
-                        <span class="font_2 text_17">排序</span>
-                        <img class="shrink-0 image_13" src="/img/ros-hmci/fa6fa7aef56d86f283de58808b2a8b7d.png" />
-                    </div> -->
-                    <div id="openForm" class="flex-row space-x-8">
-                        <img class="shrink-0 image_12" src="/img/ros-hmci/4b4c4662629e074227c63d23f46271ac.png" />
-                        <a :href="links.source" class="font_1 text_16">资源发布</a>
+            <div class="section_7 pos_3">
+                <div class="flex-row justify-between items-center section_7_content">
+                    <div></div>
+                    <div class="flex-col justify-start items-start relative group_4">
+                        <input class="font_1 text_15" outline:none type="text" placeholder="请输入资源名称以搜索" v-model="searchQuery" />
+                        <!-- <img class="image_11 pos_4" src="/img/ros-hmci/bcea28a03624dcba382543662dbb0a2c.png" /> -->
+                        <button class="ui green button image_11 pos_4">{{ $t('repos.search') }}</button>
+                    </div>
+                    <div class="flex-row space-x-28">
+                        <!-- <div class="flex-row items-center space-x-6">
+                            <span class="font_2 text_17">排序</span>
+                            <img class="shrink-0 image_13" src="/img/ros-hmci/fa6fa7aef56d86f283de58808b2a8b7d.png" />
+                        </div> -->
+                        <div id="openForm" class="flex-row space-x-8">
+                            <img class="shrink-0 image_12" src="/img/ros-hmci/4b4c4662629e074227c63d23f46271ac.png" />
+                            <a :href="links.source" class="font_1 text_16">资源发布</a>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -135,7 +139,7 @@ export default {
 
 .page {
     margin-bottom: -80px;
-    background-color: #0b0e1d;
+    /* background-color: #0b0e1d; */
     width: 100%;
     overflow-y: auto;
     overflow-x: hidden;
@@ -198,8 +202,10 @@ export default {
     position: relative;
     top: 0;
     background: url(/img/ros-hmci/mbz605.png);
-    background-size: 100% auto;
-    height: 541px;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    height: 600px;
     width: 100%;
 }
 
@@ -798,9 +804,13 @@ export default {
 }
 
 .section_7 {
-    padding: 24px 360px;
+    text-align: center;
+    padding: 24px 0;
     background-color: #f6f9fb;
 }
+.section_7_content{
+    width: 1200px;
+}
 
 .pos_3 {
     position: absolute;
@@ -830,9 +840,9 @@ export default {
 }
 
 .image_11 {
-    border-radius: 4px;
-    width: 54px;
-    height: 36px;
+    border-radius: 0 4px 4px 0;
+    width: 70px;
+    height: 34px;
 }
 
 .pos_4 {

web_src/vuepages/pages/ros-hmci/views/HelpCenter.vue

@@ -3,7 +3,7 @@
     <div class="banner flex-col relative">
       <NavigationBar></NavigationBar>
       <div class="flex-col pos_6">
-        <span class="self-center text_6">在这里,我们为你提供帮助与支撑</span>
+        <span class="self-center text_6">在这里,<br/>我们为你提供帮助与支持！</span>
       </div>
     </div>
 
@@ -13,7 +13,7 @@
         <div class="flex-row group_3 space-x-14">
           <div class="flex-col shrink-0 self-start relative section_7">
             <div class="flex-col justify-start items-start text-wrapper_2">
-              <span class="font_2 text_8">问题分类</span>
+              <span class="font_2 text_8">帮助中心</span>
             </div>
             <div class="self-center section_9"></div>
             <div class="flex-row group_6 space-x-8">
@@ -78,8 +78,10 @@ export default {
 
 .banner {
   background-image: url("/img/ros-hmci/group7348.png");
-  background-size: 100% 100%;
-  height: 541px;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: 600px;
   margin-top: -1px;
 }
 
@@ -303,9 +305,13 @@ export default {
 
 .text_6 {
   font-family: Alibaba PuHuiTi;
-  color: #ffffff;
+  color: #4d4d4d;
   font-size: 40px;
   letter-spacing: 8px;
+  line-height: normal;
+  text-align: center;
+  position: relative;
+  top: -3vh;
 }
 
 .section_6 {

web_src/vuepages/pages/ros-hmci/views/HomePage.vue

@@ -1,37 +1,53 @@
 <template>
-  <div class="flex-col relative group_4 page" style="padding-bottom: 0px">
+  <div class="flex-col relative page" style="padding-bottom: 0px">
     <div class="flex-col section_6">
-      <div class="banner_a">
-        <img class="sec_1" src="/img/ros-hmci/group7392.png">
-        <img class="sec_2" src="/img/ros-hmci/group7391.png">
-        <img class="sec_3" src="/img/ros-hmci/group7390.png">
-        <img class="sec_4" src="/img/ros-hmci/group7389.png">
-        <img class="banner_ros bounce" src="/img/ros-hmci/banner-ros.png">
-        <img class="banner_bg" src="/img/ros-hmci/首页路径.png">
-      </div>
-
-      <div class="flex-col self-start group_5">
-        <span class="self-start font_4 text_15">欢迎来到</span>
-        <div class="flex-row group_6 space-x-8">
-          <img class="shrink-0 image_11" src="/img/ros-hmci/c1b8b11fc5718ac77fbc93056561e611.png" />
-          <span class="font_4">智能操作系统</span>
+      <div class="section_6_cont">
+        <div class="homeHeadCont">
+          <div class="flexCont">
+            <span>欢迎来到</span>
+            <span class="homeBox1">智能学习</span>
+          </div>
+          <div>
+            <span class="homeBox2">人机协同</span>
+            <span>智能操作系统</span>
+          </div>
+          <div class="homeBox3">AI学习者的一体化智能学习交流平台</div>
+          <a class="font_5 gotoDownload" @click="getdownload('/os-system', 'osDownload')">立即下载</a>
         </div>
-        <div class="info-div">
-          <span class="text_16">AI学习者的一体化智能学习交流平台</span>
+        
+        <!-- 右边动效区域 -->
+        <div class="banner_right">
+          <!-- <img class="sec_1" src="/img/ros-hmci/group7392.png">
+          <img class="sec_2" src="/img/ros-hmci/group7391.png">
+          <img class="sec_3" src="/img/ros-hmci/group7390.png">
+          <img class="sec_4" src="/img/ros-hmci/group7389.png">
+          <img class="banner_ros bounce" src="/img/ros-hmci/banner-ros.png">
+          <img class="banner_bg" src="/img/ros-hmci/首页路径.png"> -->
+          <img class="homepage1" src="/img/ros-hmci/homepage1.png">
+          <img class="homepage2" src="/img/ros-hmci/homepage2.png">
+          <img class="homepage3" src="/img/ros-hmci/homepage3.png">
+          <img class="homepage4" src="/img/ros-hmci/homepage4.png">
         </div>
-      </div>
-      <div @click="getdownload('/os-system', 'osDownload')"
-        class="flex-col justify-start items-center self-start text-wrapper_2">
-        <a class="font_5">立即下载</a>
-      </div>
 
-      <NavigationBar></NavigationBar>
+        <!-- <div class="flex-col self-start group_5">
+          <span class="self-start font_4 text_15">欢迎来到</span>
+          <span class="homeBox1">智能学习</span>
+          <div class="flex-row group_6 space-x-8">
+            <img class="shrink-0 image_11" src="/img/ros-hmci/c1b8b11fc5718ac77fbc93056561e611.png" />
+            <span>人机协同</span>
+            <span class="font_4">智能操作系统</span>
+          </div>
+          <div class="info-div">
+            <span class="text_16">AI学习者的一体化智能学习交流平台</span>
+          </div>
+        </div> -->
+        <NavigationBar></NavigationBar>
+      </div>
     </div>
 
     <div class="flex-col justify-start items-center section_10 pos_3">
       <div>
-        <span class="font_8 pos_90">人机协同智能操作系统简介</span>
-        <span class="font_7 text_25 text_26 pos_4">Brief introduction</span>
+        <span class="font_8 pos_80">人机协同智能操作系统简介</span>
       </div>
       <div class="flex-row section_11 space-x-40 pos_5">
         <div class="flex-auto self-start group_13 ">
@@ -48,7 +64,7 @@
       <div class="flex-row items-center group_14 pos_7">
         <div class="flex-col group_14 space-y-10" @mouseenter="() => mouseEnter(0)">
           <img class="image_18" :class="{ 'bubble-animation': hoveredImage === 0 }" src="/img/ros-hmci/作业环境.png" />
-          <a class="text_31" :style="{ color: activeIndex === 0 ? '#24a19b' : '' }">人机协同智能操作系统架构设计与系统集成</a>
+          <a class="text_31" :style="{ color: activeIndex === 0 ? '#24a19b' : '' }">架构设计与系统集成</a>
         </div>
         <div class="flex-col group_15 space-y-10" @mouseenter="() => mouseEnter(1)">
           <img class="self-center image_18" :class="{ 'bubble-animation': hoveredImage === 1 }"
@@ -182,8 +198,7 @@
 
 
     <div class="flex-col justify-start items-center pos_89 ">
-      <span class="font_8 pos_90">项目协同</span>
-      <span class="font_7 text_25 text_26 pos_4">Project collaboration</span>
+      <span class="font_8 pos_80">项目协同</span>
       <div class="xmxt justify-center items-center flex-row">
         <div class="justify-center items-center flex-col sjx">
           <img class="image_42" src="/img/ros-hmci/mbz545.png" />
@@ -209,8 +224,8 @@
     </div>
 
     <div class="flex-col justify-start items-center section_19 pos_13">
-      <img class="image_29" src="/img/ros-hmci/ee5680e0a521215326befe295219014f.png" />
-      <span class="text_25 text_40 pos_15">Overall architecture</span>
+      <!-- <img class="image_29" src="/img/ros-hmci/ee5680e0a521215326befe295219014f.png" /> -->
+      <span class="pos_15">人机协同智能操作系统整体架构</span>
 
       <div class="Ovearc">
         <div class="section_22 pos_19"></div>
@@ -359,7 +374,6 @@
 
 
     <div class="pos_88">
-      <span class="font_7 text_25 text_49 pos_43">Application scenario</span>
       <span class="font_8 pos_44">系统典型应用场景</span>
       <span class="font_5 text_50 pos_45">
 
@@ -583,7 +597,7 @@ export default {
         } else {
           document.querySelector(tabIds[i]).style.display = "none";
         }
-      } const positions = [144, 457, 704, 974];
+      } const positions = [50, 350, 640, 974];
       tabbar.style.left = positions[index] + "px";
     },
 
@@ -613,6 +627,119 @@ export default {
 };
 </script>
 
+<style scoped>
+.flexCont{
+  display: flex;
+  align-items: center;
+}
+.section_6_cont{
+  width: 1200px;
+  height: 100%;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.homeHeadCont{
+  color:#363737;
+  font-size:40px;
+  font-weight: bold;
+  line-height: normal;
+  letter-spacing: 4px;
+  position: relative;
+  top: -50px;
+}
+.homeBox1, .homeBox3, .gotoDownload{
+  font-weight: normal;
+}
+.homeBox1{
+  color:#ffffff;
+  font-size:21px;
+  background-image:linear-gradient(133.55deg,#edbd4a 0%,#19bf77 100%);
+  border-radius:4px;
+  padding: 8px 12px;
+  margin-left: 12px;
+}
+.homeBox2{
+  background-image:-webkit-linear-gradient(left,#FAC171,#02E588); 
+  -webkit-background-clip:text;
+  -webkit-text-fill-color:transparent;
+}
+.homeBox3{
+  color:#ffffff;
+  font-size:20px;
+  background-image:linear-gradient(150.44deg,#19bf77 0%,rgba(26, 209, 195, 0) 100%);
+  border-radius: 6px;
+  padding: 10px 150px 10px 25px;
+  margin-top: 20px;
+}
+.gotoDownload{
+  background-color: #19bf77;
+  padding: 15px 30px;
+  margin-top: 45px;
+  display: inline-block;
+  border-radius: 4px;
+}
+.banner_right{
+  position: relative;
+  height: 100%;
+  flex: 1;
+  right: -5vw;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+}
+.homepage1{
+  width: 230px;
+  z-index: 2;
+  animation: scaleDraw 4s ease-in-out infinite;
+  -webkit-animation: scaleDraw 4s ease-in-out infinite;
+}
+@keyframes scaleDraw {
+  0% {transform:scale(1);}
+  25% {transform:scale(1.3);}
+  50% {transform:scale(1);}
+  75% {transform:scale(1.3);}
+}
+.homepage2{
+  width: 100px;
+  z-index: 2;
+  position: absolute;
+  top: 7vh;
+  left: 25px;
+  /* animation: bounce 3s ease-in-out infinite;
+  -webkit-animation: bounce 3s ease-in-out infinite; */
+}
+.homepage3{
+  width: 120px;
+  z-index: 2;
+  position: absolute;
+  bottom: 10vh;
+  right: 0;
+  /* animation: bounce 2s ease-in-out infinite;
+  -webkit-animation: bounce 2s ease-in-out infinite; */
+}
+@keyframes bounce {
+
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+
+  50% {
+    transform: translateY(-20px);
+  }
+}
+.homepage4{
+  width: 716px;
+  z-index: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
+}
+</style>
+
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .double-line {
@@ -728,7 +855,7 @@ export default {
   height: 186px;
   width: 322px;
   position: absolute;
-  top: 692px;
+  top: 69px;
   right: 492px;
   animation: fadeinout 1.5s ease-in-out infinite;
 }
@@ -768,7 +895,7 @@ export default {
   top: 90px;
   right: 581px;
   width: 156.5px;
-  height: 80.5px;
+  height: 85px;
 }
 
 .Ovearc {
@@ -777,7 +904,7 @@ export default {
 }
 
 .page {
-  background-color: #0b0e1d;
+  /* background-color: #0b0e1d; */
   width: 100%;
   overflow-y: auto;
   overflow-x: hidden;
@@ -1016,9 +1143,9 @@ export default {
 .section_6 {
   position: relative;
   top: 0px;
-  height: 541px;
+  height: 600px;
   background-image: url("/img/ros-hmci/homepageBanner.png");
-  background-position: right;
+  background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
 }
@@ -1061,7 +1188,7 @@ export default {
   font-size: 38px;
   font-family: Alibaba PuHuiTi;
   line-height: 36px;
-  color: #ffffff;
+  color:#363737;
 }
 
 .text_15 {
@@ -1248,7 +1375,7 @@ export default {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  bottom: 77px;
+  bottom: 125px;
 }
 
 .space-x-42>*:not(:first-child) {
@@ -1465,7 +1592,7 @@ export default {
 }
 
 .section_10 {
-  height: 1777px;
+  height: 1850px;
   background-image: url("/img/ros-hmci/mbz667.png");
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -1475,7 +1602,7 @@ export default {
   position: absolute;
   left: 0;
   right: -1px;
-  top: 541px;
+  top: 600px;
 }
 
 .font_8 {
@@ -1539,10 +1666,11 @@ export default {
 
 .pos_7 {
   position: absolute;
-  top: 1085px;
+  top: 1150px;
   left: 50%;
-  width: 1210px;
+  width: 1118px;
   transform: translateX(-50%);
+  justify-content: space-between;
 }
 
 .image_24 {
@@ -1672,7 +1800,7 @@ export default {
   position: relative;
   left: 0;
   right: 0;
-  top: 1425px;
+  top: 1500px;
   height: 1153px;
 }
 
@@ -1681,17 +1809,12 @@ export default {
   height: 34px;
 }
 
-.text_40 {
-  color: #ffffff;
-  font-size: 50px;
-  font-family: PingFang SC;
-  line-height: 37px;
-}
-
 .pos_15 {
+  font-size: 36px;
+  color: #ffffff;
   position: absolute;
   left: 50%;
-  top: 243.5px;
+  top: 265px;
   transform: translateX(-50%);
 }
 
@@ -1713,7 +1836,7 @@ export default {
 .pos_44 {
   position: absolute;
   left: 50%;
-  top: 57px;
+  top: 65px;
   transform: translateX(-50%);
 }
 
@@ -1797,7 +1920,7 @@ export default {
   font-size: 16px;
   font-family: Alibaba PuHuiTi;
   line-height: 19px;
-  color: #d471e4;
+  color: #4d4d4d;
 }
 
 .image_30 {
@@ -1873,8 +1996,8 @@ export default {
 
 .section_29 {
   padding: 32px 0 26px;
-  background-image: linear-gradient(190deg, #1b283b 15.1%, #233a48 92.5%);
-  box-shadow: 0px 3px 15px #1078a769;
+  background-image:linear-gradient(189.96deg,#bdff91 0%,#91ffd7 37.65%,#87eee9 100%);
+  box-shadow:0px 3px 15px rgba(0, 136, 145, 0.64),0px 3px 20px #85f2eb inset;
   border-radius: 50%;
   width: 99px;
 }
@@ -1911,7 +2034,7 @@ export default {
   font-size: 16px;
   font-family: Alibaba PuHuiTi;
   line-height: 14.5px;
-  color: #1ad1c3;
+  color:#4d4d4d;
 }
 
 .text_45 {
@@ -1920,8 +2043,8 @@ export default {
 
 .text-wrapper_9 {
   padding: 26.5px 0;
-  background-image: linear-gradient(190deg, #1b283b 15.1%, #233a48 92.5%);
-  box-shadow: 0px 3px 15px #1078a769;
+  background-image:linear-gradient(189.96deg,#bdff91 0%,#91ffd7 37.65%,#87eee9 100%);
+  box-shadow:0px 3px 15px rgba(0, 136, 145, 0.64),0px 3px 20px #85f2eb inset;
   border-radius: 50%;
   width: 74px;
 }
@@ -1935,8 +2058,8 @@ export default {
 .section_23 {
   width: 156px;
   padding: 58px 0;
-  background-image: linear-gradient(190deg, #1b283b 15.1%, #233a48 92.5%);
-  box-shadow: 0px 3px 15px #1078a769;
+  background-image:linear-gradient(180deg,#ffffff 0%,#cdf6ae 100%);
+  box-shadow:0px 3px 15px rgba(0, 136, 145, 0.35),0px 3px 20px #ffffff inset;
   border-radius: 50%;
 }
 
@@ -2013,13 +2136,13 @@ export default {
   font-size: 16px;
   font-family: Alibaba PuHuiTi;
   line-height: 19px;
-  color: #1ad1c3;
+  color:#4d4d4d;
 }
 
 .text-wrapper_6 {
   padding: 58px 0;
-  background-image: linear-gradient(190deg, #1b283b 15.1%, #233a48 92.5%);
-  box-shadow: 0px 3px 15px #1078a769;
+  background-image:linear-gradient(189.96deg,#bdff91 0%,#91ffd7 37.65%,#87eee9 100%);
+  box-shadow:0px 3px 15px rgba(0, 136, 145, 0.64),0px 3px 20px #85f2eb inset;
   border-radius: 50%;
   width: 135px;
 }
@@ -2031,7 +2154,7 @@ export default {
 }
 
 .text_46 {
-  color: #6eb8f7;
+  color: #4d4d4d;
   line-height: 15px;
 }
 
@@ -2079,7 +2202,7 @@ export default {
 }
 
 .text_48 {
-  color: #ffffff;
+  color: #4d4d4d;
   font-size: 13px;
   font-family: Alibaba PuHuiTi;
   font-weight: 300;
@@ -2088,8 +2211,8 @@ export default {
 
 .text-wrapper_7 {
   padding: 36px 0;
-  background-image: linear-gradient(190deg, #1b283b 15.1%, #233a48 92.5%);
-  box-shadow: 0px 3px 15px #1078a769;
+  background-image:linear-gradient(180deg,#ffffff 0%,#cdf6ae 100%);
+  box-shadow:0px 3px 15px rgba(0, 136, 145, 0.35),0px 3px 20px #ffffff inset;
   border-radius: 50%;
   width: 93px;
 }
@@ -2114,7 +2237,7 @@ export default {
 .pos_9 {
   position: absolute;
   left: 50%;
-  top: 1260px;
+  top: 1330px;
   transform: translateX(-50%);
 }
 
@@ -2326,9 +2449,9 @@ export default {
 
 .section_20 {
   padding: 20px 0 144px;
-  background-image: linear-gradient(239.9deg, #374156 0%, #1f3441 53.5%, #32445a 102.4%);
-  border-radius: 8px;
-  box-shadow: 0px 3px 15px #1078a73d;
+  background-image:linear-gradient(180deg,#ffffff 0%,#fdffe2 100%);
+  border-radius:8px;
+  box-shadow:0px 3px 15px rgba(0, 136, 145, 0.59),0px 3px 5px #ffffff inset;
   width: 292px;
 }
 
@@ -2491,7 +2614,7 @@ export default {
 
 .text_97 {
   font-family: Alibaba PuHuiTi;
-  color: #39d595;
+  color: #4d4d4d;
   font-size: 16px;
   text-align: center;
 }
@@ -2499,14 +2622,14 @@ export default {
 .text_98 {
   text-shadow: 0px 3px 15px rgba(25, 191, 119, 0.3);
   font-family: Alibaba PuHuiTi;
-  color: #f95f9f;
+  color: #4d4d4d;
   font-size: 16px;
   text-align: center;
 }
 
 .text_99 {
   font-family: Alibaba PuHuiTi;
-  color: #39d595;
+  color: #4d4d4d;
   font-size: 16px;
   text-align: center;
 }
@@ -2532,6 +2655,7 @@ export default {
 
 .text_73 {
   margin-top: 15px;
+  margin-bottom: 5px;
   font-family: Alibaba PuHuiTi;
   color: #181818;
   font-size: 28px;
@@ -2592,7 +2716,7 @@ export default {
 
 .pos_88 {
   position: absolute;
-  top: 3239px;
+  top: 3300px;
   height: 621px;
   width: 100%;
   background: url("/img/ros-hmci/底部.png");
@@ -2602,14 +2726,14 @@ export default {
 .pos_89 {
   margin-top: 20px;
   position: relative;
-  top: 1151px;
+  top: 1180px;
   height: 100px;
 }
 
-.pos_90 {
+.pos_80 {
   position: absolute;
   left: 50%;
-  top: 90px;
+  top: 80px;
   transform: translateX(-50%);
 }
 

web_src/vuepages/pages/ros-hmci/views/OSSystem.vue

@@ -6,7 +6,7 @@
       <div class="flex-col space-y-72">
         <div class="flex-col justify-start self-center relative group_3">
           <span class="text_16 pos_99">关于人机协同智能操作系统</span>
-          <span class="font_3 text_14 text_15 pos_4">Brief introduction</span>
+          <!-- <span class="font_3 text_14 text_15 pos_4">Brief introduction</span> -->
         </div>
         <div class="flex-row space-x-92">
           <div ref="leftElem" class="flex-col self-start group_5 space-y-54 slide-in-left" :class="{ 'show': showLeft }">
@@ -51,7 +51,7 @@
           <div class="flex-col group_36 space-y-64">
             <div class="flex-col self-center group_8 space-y-26">
               <div class="flex-col justify-start items-center relative group_9">
-                <span class="text_14 text_20">System architecture</span>
+                <!-- <span class="text_14 text_20">System architecture</span> -->
                 <span class="text_16 pos_98">人机协同智能操作系统架构</span>
               </div>
               <span class="text_21">
@@ -445,8 +445,8 @@
         <div class="flex-col justify-start items-center section_13">
           <div id="osDownload" class="flex-col space-y-48">
             <div class="flex-col justify-start items-center self-center relative group_12">
-              <img class="image_19" src="/img/ros-hmci/a5163f60f9fa71fbeec94b26f590f7a1.png" />
-              <span class="font_3 text_14 text_34 pos_17">Download</span>
+              <!-- <img class="image_19" src="/img/ros-hmci/a5163f60f9fa71fbeec94b26f590f7a1.png" /> -->
+              <span class="font_3 text_14 text_34 pos_17">系统下载</span>
             </div>
 
             <div class="flex-row space-x-14">
@@ -496,7 +496,8 @@
                               src="/img/ros-hmci/mbz614.png" /></a>
                         </div>
                         <div class="flex-row items-baseline group_14">
-                          <a :href="`/${selectedRepoOwner}/${selectedRepoName}/datasets`" class="font_13 text_42">本次改动内容...</a>
+                          <a :href="`/${selectedRepoOwner}/${selectedRepoName}/datasets`"
+                            class="font_13 text_42">本次改动内容...</a>
                           <span class="font_15">{{ attachment.CreatedUnix | formatDate }}</span>
                         </div>
                       </div>
@@ -531,8 +532,8 @@ export default {
       selectedRepoAlias: '',
       selectedRepoName: '',
       selectedRepoOwner: '',
-      showLeft: false,
-      showRight: false,
+      showLeft: true,
+      showRight: true,
     };
   },
   filters: {
@@ -551,13 +552,12 @@ export default {
     this.fetchRepos();
   },
   mounted() {
-    window.addEventListener('scroll', this.handleScroll);
-
-    this.xtxz("sec1");
+    // window.addEventListener('scroll', this.handleScroll);
+    // this.xtxz("sec1");
     this.toLocal();
   },
   beforeDestroy() {
-    window.removeEventListener('scroll', this.handleScroll);
+    // window.removeEventListener('scroll', this.handleScroll);
   },
   methods: {
     handleScroll() {
@@ -615,7 +615,13 @@ export default {
 
         // 处理请求成功的情况
         if (response.data.result_code === "0") {
-          const data = response.data.data[0]; // 假设 data 数组中的第一个对象包含所需数据
+          // const test1 = response.data.data;
+          // console.log(test1);
+
+          const responseData = JSON.parse(response.data.data); // 解析 "data" 字段的 JSON 字符串
+          // console.log(responseData);
+
+          const data = responseData[0]; // 假设 data 数组中的第一个对象包含所需数据
           this.description = data.Description;
           this.attachments = data.Attachments;
         } else {
@@ -715,7 +721,7 @@ export default {
 }
 
 .page {
-  background-color: #0b0e1d;
+  /* background-color: #0b0e1d; */
   width: 100%;
   overflow-y: auto;
   overflow-x: hidden;
@@ -727,8 +733,10 @@ export default {
   position: relative;
   top: 0px;
   background: url(/img/ros-hmci/mbz605.png);
-  background-size: 100% auto;
-  height: 541px;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: 600px;
   width: 100%;
 }
 
@@ -781,7 +789,7 @@ export default {
 }
 
 .text_14 {
-  opacity: 0.11;
+  /* opacity: 0.11; */
 }
 
 .text_15 {
@@ -939,7 +947,6 @@ export default {
 
 .pos_98 {
   position: relative;
-  top: -17px;
 }
 
 .pos_99 {
@@ -970,7 +977,8 @@ export default {
 }
 
 .group_1 {
-  padding-top: 0;
+  padding-top: 30px;
+  padding-bottom: 60px;
 }
 
 .group_36 {
@@ -987,7 +995,7 @@ export default {
 }
 
 .space-y-26>*:not(:first-child) {
-  margin-top: 10px;
+  margin-top: 40px;
 }
 
 .text_20 {
@@ -1354,10 +1362,10 @@ export default {
 
 .section_13 {
   margin-top: -13px;
-
-  padding: 264px 0 154px;
+  padding: 130px 0 154px;
   background-image: url("/img/ros-hmci/mbz612.png");
-  background-size: 100% 100%;
+  background-position: center;
+  background-size: cover;
   background-repeat: no-repeat;
 }
 
@@ -1376,21 +1384,22 @@ export default {
 }
 
 .text_34 {
-  color: #ffffff;
+  font-size: 36px;
+  color: #181818;
 }
 
 .pos_17 {
   position: absolute;
   left: 0;
   right: 0;
-  top: 0;
+  top: -45px;
 }
 
 .section_14 {
   padding-bottom: 156px;
   background-image: linear-gradient(180deg, #f6f9fb 0%, #ffffff 100%);
   border-radius: 4px;
-  box-shadow: 0px 0px 12px #0716156b;
+  box-shadow:0px 0px 12px rgba(164, 169, 181, 0.24);
   width: 280px;
   height: 450px;
 }
@@ -1520,7 +1529,7 @@ export default {
   padding: 22px 22px 72px;
   background-image: linear-gradient(180deg, #f6f9fb 0%, #ffffff 100%);
   border-radius: 4px;
-  box-shadow: 0px 0px 12px #0716156b;
+  box-shadow:0px 0px 12px rgba(164, 169, 181, 0.24);
   margin-left: 13px;
   opacity: 0;
   transition: opacity 0.7s ease-in-out;
@@ -1574,10 +1583,11 @@ export default {
 .section_19 {
   margin-top: 19px;
   padding: 35px 8px 18px;
-  background-image: linear-gradient(180deg, #eff4f6 0%, #ffffff 100%);
+  background-image:linear-gradient(180deg,#eff6f3 0%,#ffffff 100%);
   border-radius: 4px;
-  box-shadow: 0px 3px 12px #0000000a;
+  box-shadow:0px 3px 12px rgba(0, 0, 0, 0.04);
   border: solid 1px #ffffff;
+  min-height: 252px;
 }
 
 .group_14 {

web_src/vuepages/pages/ros-hmci/views/OpenApp.vue

@@ -9,7 +9,8 @@
             <span class="line1_2">社区活动</span>
           </div>
         </div>
-        <img src="/img/ros-hmci/平台动态.png" style="width: 50%">
+        <!-- <img src="/img/ros-hmci/平台动态.png" style="width: 50%"> -->
+        <div class="info-div1">开源社区活动来袭</div>
         <div class="info-div">
           <span class="info2">欢迎您使用鹏程·盘古SDK 发布版——pcl_pangu v1.2！</span>
         </div>
@@ -145,15 +146,17 @@ export default {
   position: relative;
   top: 0px;
   background: url(/img/ros-hmci/banner.png);
-  background-size: 100% 100%;
-  height: 541px;
+  background-position: center;
+  background-size: cover;
+  background-repeat: no-repeat;
+  height: 600px;
   width: 100%;
 }
 
 .line1_1 {
   font-family: Alibaba PuHuiTi;
-  color: #ffffff;
-  font-size: 16px;
+  color:#f3bf12;
+  font-size: 20px;
 }
 
 .line1_sqhd {
@@ -169,30 +172,44 @@ export default {
   font-family: Alibaba PuHuiTi;
   color: #ffffff;
   font-size: 14px;
+  padding: 4px 0;
 }
 
 .info {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  position: absolute;
-  top: 104px;
-  left: 18%;
+  position: relative;
+  top: 165px;
+  width: 1200px;
+  margin: 0 auto;
 }
 
-.info>*:not(:first-child) {
-  margin-top: 36px;
+// .info>*:not(:first-child) {
+//   margin-top: 36px;
+// }
+.line1{
+  align-items: center;
+}
+.info-div1{
+  font-size: 40px;
+  line-height: normal;
+  margin: 20px 0 30px;
+  background-image: linear-gradient(178.32deg,#06c08c 0%,#24a19b 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 700;
+  font-family: sucaijishikufangti;
 }
-
 .info-div {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
-  justify-content: center;
-  width: 590px;
   height: 43px;
   background-image: linear-gradient(150.44deg, #19bf77 0%, rgba(26, 209, 195, 0) 100%);
   border-radius: 6px;
+  padding: 0 60px 0 20px;
+  width: fit-content;
 }
 
 .info1 {
@@ -205,7 +222,7 @@ export default {
 .info2 {
   font-family: Alibaba PuHuiTi;
   color: #ffffff;
-  font-size: 21px;
+  font-size: 16px;
   letter-spacing: 1px;
 }
 

web_src/vuepages/pages/ros-hmci/views/OpenDataset.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
     <AppBanner></AppBanner>
-    <div class="repos--seach" style="margin-top: 20px">
+    <div class="repos--seach datasetSearch">
       <div class="ui container">
         <div class="ui two column centered grid">
           <div class="fourteen wide mobile ten wide tablet ten wide computer column ui form ignore-dirty">
             <div class="ui fluid action input">
-              <input name="q" value="" placeholder="" autofocus v-model="searchValue"
+              <input name="q" value="" placeholder="搜索数据集" autofocus v-model="searchValue"
                 @keyup.enter="searchFlag = !searchFlag" />
               <button class="ui green button" @click="searchFlag = !searchFlag">
                 {{ $t("repos.search") }}
@@ -245,6 +245,10 @@ export default {
 };
 </script>
 <style scoped>
+.datasetSearch{
+  padding: 20px 0 30px;
+  background-color: #f5f5f6;
+}
 .mg-b-1 {
   margin-bottom: 1rem;
 }