home page

custom/public/css/git.openi.css

@@ -72,9 +72,7 @@
   z-index: 10;
 }
 .ui.secondary.c2net.segment{
-    /* background: #f8faff; 
-    border: none;*/
-    margin-bottom: 5em;
+    padding-bottom: 3em;
     padding-top: 2em;
     color: rgba(0,0,0,.87);
     background-image: linear-gradient(to bottom left,var(--tw-gradient-stops));
@@ -203,7 +201,7 @@
   padding: 0;
 }
 .newslist{
-  height: 300px;
+  height: 260px;
   overflow: hidden;
 }
 
@@ -299,7 +297,7 @@
   background-color: #FFF;
   box-shadow: 0px 5px 10px 0px rgba(105, 192, 255, .3);
   border: 1px solid rgba(105, 192, 255, .4);
-  min-height: 10.8em;
+  /* min-height: 10.8em; */
 }
 .homepro-list .ui.card>.content>.header{
   line-height: 40px !important;

public/home/home.js

@@ -9,8 +9,9 @@ if(isEmpty(token)){
 
 var swiperNewMessage = new Swiper(".newslist", {
     direction: "vertical",
-    slidesPerView: 9,
+    slidesPerView: 6,
     loop: true,
+    spaceBetween: 8,
     autoplay: {
         delay: 2500,
         disableOnInteraction: false,
@@ -618,22 +619,23 @@ function displayRepo(json){
             for (var i = 0, iLen = repos.length; i < iLen; i++) {
                 if (i >= 4) break;
                 var repo = repos[i];
+                //  <i class="ri-star-line"></i>${repo["NumStars"]}<i class="ri-git-branch-line am-ml-10"></i>${repo["NumForks"]}</span> <div class="ui tags nowrap am-mt-10"></div>
                 html += `<div class="ui fluid card" style="border-radius:6px;">
                     <div class="content">
-                        <span class="right floated meta">
-                        <i class="ri-star-line"></i>${repo["NumStars"]}<i class="ri-git-branch-line am-ml-10"></i>${repo["NumForks"]}</span>
-                        <img class="left floated mini ui image" src="${repo["Avatar"]}">
-                        <a class="header nowrap" style="color:rgb(50, 145, 248);font-size:14px;" href="/${repo["OwnerName"]}/${repo["Name"]}"> + ${repo["Alias"]}</a>
-                        <div class="description nowrap-2" style="min-height:2.837em">${repo["Description"]}</div>
-                        <div class="ui tags nowrap am-mt-10">`;
-                if (repo["Topics"] != null) {
-                    for(var j = 0; j < repo["Topics"].length; j++){
-                        var topic = repo["Topics"][j];
-                        var url = "/explore/repos?q=" +  (topic) + "&amp;topic="
-                        html += `<a class="ui small label topic" href=" ${url}">${topic}</a>`;
-                    }
-                }
-                html += `</div>
+                        <span class="right floated meta">                       
+                            <img class="left floated mini ui image" src="${repo["Avatar"]}">
+                        </span>
+                        <a class="header nowrap" style="color:rgb(50, 145, 248);font-size:14px;" href="/${repo["OwnerName"]}/${repo["Name"]}" title="${repo["Alias"]}"> + ${repo["Alias"]}</a>
+                        <div class="description nowrap-2" style="rgba(136,136,136,1);;font-size:12px;" title="${repo["Description"]}">${repo["Description"]}</div>
+                        `;
+                // if (repo["Topics"] != null) {
+                //     for(var j = 0; j < repo["Topics"].length; j++){
+                //         var topic = repo["Topics"][j];
+                //         var url = "/explore/repos?q=" +  (topic) + "&amp;topic="
+                //         html += `<a class="ui small label topic" href=" ${url}">${topic}</a>`;
+                //     }
+                // }
+                html += `
                     </div>
                 </div>`;
             }
@@ -725,8 +727,8 @@ function displayUserExp(data) {
                   <div class="img" style="width:60px;height:60px;background-image:url('${dataI.avatar}')"></div>
                 </a>
               </div></div>
-              <div><div class="content label" title="${dataI.label}">${dataI.name}</div></div>
-              <div><div class="content descr" title="${dataI.descr}">${dataI.desc}</div></div>
+              <div><div class="content label" title="${dataI.fullname || dataI.name}">${dataI.fullname || dataI.name}</div></div>
+              <div><div class="content descr" title="${dataI.desc}">${dataI.desc}</div></div>
             </div>        
       </div>`
     }

templates/base/footer_content.tmpl

@@ -1,4 +1,4 @@
-<footer>
+<footer style="border-top:none;">
 	<div class="ui container">
 		<div class="ui grid">
 			<div class="sixteen wide mobile wide tablet three wide computer column">
@@ -89,8 +89,8 @@
 				</div>
 			</div>
 		</div>
-		<div class="ui grid" style="margin-bottom:2rem;">
-			<div class="sixteen wide mobile sixteen wide tablet wide computer column" style=" margin:2.0rem 0;text-align:center;">
+		<div class="ui grid" style="margin-top:2rem;margin-bottom:2rem;border-top:1px solid #d6d6d6;">
+			<div class="sixteen wide mobile sixteen wide tablet wide computer column" style=" margin:1.0rem 0;text-align:center;">
 				{{.i18n.Tr "custom.foot.copyright"}} <a href="http://beian.miit.gov.cn/" target="_blank">京ICP备18004880号</a>
 				<br>
 				{{.i18n.Tr "home.powerdby"}}<a href="https://www.trustie.net/" target="_blank">Trustie确实</a>{{.i18n.Tr "、Gitea"}}

templates/base/head_navbar.tmpl

@@ -163,7 +163,7 @@
 			</div><!-- end dropdown menu create new -->
 
 			<div class="ui simple dropdown jump item poping up" tabindex="-1" data-content="{{.i18n.Tr "user_profile_and_more"}}" data-variation="tiny inverted">
-				<span class="text">
+				<span class="text" style="display:flex;align-items:center;">
 					<img class="ui tiny avatar image" width="24" height="24" src="{{.SignedUser.RelAvatarLink}}">
 					<span class="sr-only">{{.i18n.Tr "user_profile_and_more"}}</span>
 					<span class="mobile-only">{{.SignedUser.Name}}</span>

templates/custom/home/home_activity.tmpl

@@ -1,7 +1,7 @@
 <style>
 .homeactivity {
-  padding-top: 5em;
-  padding-bottom: 5em;
+  padding-top: 5rem;
+  padding-bottom: 6rem;
   overflow: hidden;
 }
 .homeactivity .card {
@@ -13,15 +13,13 @@
   height: 100% !important;
 }
 .homeactivity .image-name {
-  text-align: center;
-  width: 360px !important;  
+  font-size: 14px;
+  color: rgb(16, 16, 16);
   text-align: center;
   margin-top: 0.8em;
-  color: rgb(16, 16, 16);
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 0 20px;
-  position: absolute;
   box-sizing: border-box;
   white-space: nowrap;
 }

templates/custom/home/home_org.tmpl

@@ -1,7 +1,7 @@
 <style>
 
 </style>
-<div class="ui container homeorg _hm-container">
+<div class="ui container homeorg _hm-container" style="max-width:1200px;">
   <div class="ui stackable grid"> 
     <div class="sixteen wide tablet sixteen wide computer column" style="text-align:center;">
       <h2>{{.page_recommend_org}}</h2>

templates/custom/home/home_repo.tmpl

@@ -4,7 +4,7 @@
 }
 </style>
 <div class="homepro-bg">
-  <div class="ui container homepro _hm-container" style="padding-top:2em;padding-bottom:2em;">
+  <div class="ui container homepro _hm-container" style="padding-top:4rem;padding-bottom:3rem;">
     <div class="ui stackable grid">
       <div class="sixteen wide tablet four wide computer column">
         <h2>{{.page_recommend_repo}}</h2>

templates/custom/home/home_top.tmpl

@@ -1,30 +1,18 @@
 <style>
-  @media (min-width: 400px) and (max-width: 1200px) {
+  @media (min-width: 100px) and (max-width: 800px) {
     #homenews {
       top: -1100px !important;
     }
   }
-  @media (min-width: 1320px) and (max-width: 1519.99px) {
+  @media (min-width: 1320px) and (max-width: 1599.99px) {
     ._hm-container {
       width: 1200px !important;
     }
   }
 
-  @media (min-width: 1520px) and (max-width: 1719.99px) {
+  @media only screen and (min-width: 1600px) {
     ._hm-container {
-      width: 1400px !important;
-    }
-  }
-
-  @media (min-width: 1720px) and (max-width: 1919.99px) {
-    ._hm-container {
-      width: 1600px !important;
-    }
-  }
-
-  @media only screen and (min-width: 1920px) {
-    ._hm-container {
-      width: 1800px !important;
+      width: 1440px !important;
     }
   }
 
@@ -404,7 +392,7 @@
   ._hm-bg-container {
     overflow: hidden;
     position: relative;
-    height: 673px;
+    height: 520px;
     background: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%221%22%20cx%3D%220%22%20cy%3D%220%22%20r%3D%221%22%20gradientTransform%3D%22matrix(-1.393%2C%200.2919999999999999%2C%20-0.06390807221064813%2C%20-1.395786%2C%201%2C%200.997)%22%3E%3Cstop%20stop-color%3D%22%233bb6fe%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%232abcff%22%20stop-opacity%3D%221%22%20offset%3D%220.51%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%238e4cb7%22%20stop-opacity%3D%221%22%20offset%3D%221%22%3E%3C%2Fstop%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E");
   }
 
@@ -748,7 +736,7 @@
 
   ._hm-universe {
     position: relative;
-    top: 0;
+    top: -55px;
     left: 20%;
   }
 
@@ -784,7 +772,7 @@
 
   ._hm-person-area {
     position: relative;
-    top: 0;
+    top: -55px;
     right: 10%;
     z-index: 3;
   }
@@ -1382,7 +1370,7 @@
     line-height: 53px;
     text-decoration: none;
     text-align: center;
-    margin-bottom: 50px;
+    margin-bottom: 38px;
   }
 
   ._hm-big-descr {
@@ -1452,7 +1440,7 @@
     display: flex;
     justify-content: space-around;
     align-items: center;
-    margin: 60px 40px;
+    margin: 60px 10px;
     flex-wrap: wrap;
   }
 
@@ -1476,7 +1464,7 @@
   }
 
   ._hm-recommend-info-area ._hm-link:hover {
-    color: #fb6357;
+    opacity: 0.8;
   }
 
   ._hm-recommend-info-area-1 {
@@ -1507,7 +1495,7 @@
   }
 
   ._hm-recommend-info-area-1 a:hover {
-    color: #fb6357;
+    opacity: 0.8;
   }
 
   ._hm-recommend-info-area-2 {
@@ -1546,7 +1534,7 @@
   #homenews {
     position: absolute;
     left: 10%;
-    top: 300px;
+    top: 200px;
     z-index: 2;
     width: 775px;
   }
@@ -1761,41 +1749,44 @@
     </div>
   </div>
 </div>
-<div class="_hm-recommend-info">
-  <div class="_hm-recommend-info-area _hm-recommend-info-area-1">
-    <div>
-      <a style="display:none;" class="_hm-notice" href="javascript:;">
-        <i class="ri-arrow-right-s-line"></i>
-        <span></span>
-      </a>
+<div class="ui container _hm-container">
+  <div class="_hm-recommend-info ">
+    <div class="_hm-recommend-info-area _hm-recommend-info-area-1">
+      <div>
+        <a style="display:none;" class="_hm-notice" href="javascript:;">
+          <i class="ri-arrow-right-s-line"></i>
+          <span></span>
+        </a>
+      </div>
+      <div>
+        <a style="display:none;" class="_hm-notice" href="javascript:;">
+          <i class="ri-arrow-right-s-line"></i>
+          <span></span>
+        </a>
+      </div>
+      <div>
+        <a style="display:none;" class="_hm-notice" href="javascript:;">
+          <i class="ri-arrow-right-s-line"></i>
+          <span></span>
+        </a>
+      </div>
+      <div style="text-align:right;">
+        <a href="/home/notice" style="border-bottom: 1px solid;display:inline-block;">
+          <span style="margin-right:2px;">{{.i18n.Tr "home.more_notice"}}</span><i class="ri-arrow-right-line"></i>
+        </a>
+      </div>
     </div>
-    <div>
-      <a style="display:none;" class="_hm-notice" href="javascript:;">
-        <i class="ri-arrow-right-s-line"></i>
-        <span></span>
-      </a>
+    <div class="_hm-recommend-info-area _hm-recommend-info-area-2">
+      <div class="_hm-recommend-info-area-2-bg-1"></div>
+      <div class="_hm-recommend-info-area-2-bg-2"></div>
+      <a href="javascript:;" class="_hm-link"></a>
     </div>
-    <div>
-      <a style="display:none;" class="_hm-notice" href="javascript:;">
-        <i class="ri-arrow-right-s-line"></i>
-        <span></span>
-      </a>
+    <div class="_hm-recommend-info-area _hm-recommend-info-area-3">
+      <a href="javascript:;" class="_hm-link"></a>
     </div>
-    <div style="text-align:right;">
-      <a href="/home/notice" style="border-bottom: 1px solid;display:inline-block;">
-        <span style="margin-right:2px;">{{.i18n.Tr "home.more_notice"}}</span><i class="ri-arrow-right-line"></i>
-      </a>
+    <div class="_hm-recommend-info-area _hm-recommend-info-area-4">
+      <a href="javascript:;" class="_hm-link"></a>
     </div>
   </div>
-  <div class="_hm-recommend-info-area _hm-recommend-info-area-2">
-    <div class="_hm-recommend-info-area-2-bg-1"></div>
-    <div class="_hm-recommend-info-area-2-bg-2"></div>
-    <a href="javascript:;" class="_hm-link"></a>
-  </div>
-  <div class="_hm-recommend-info-area _hm-recommend-info-area-3">
-    <a href="javascript:;" class="_hm-link"></a>
-  </div>
-  <div class="_hm-recommend-info-area _hm-recommend-info-area-4">
-    <a href="javascript:;" class="_hm-link"></a>
-  </div>
 </div>
+

templates/home.tmpl

@@ -74,7 +74,7 @@
 
     <!-- 协同开发环境 -->
     <a name="fourth"></a>
-    <div class="ui container i-env _hm-container">        
+    <div class="ui container i-env _hm-container" style="padding-bottom:0rem;padding-top:4rem;">
         <div class="ui center am-pb-30">
             <h2>{{.page_dev_env}}</h2>
             <p><span class="ui text grey">{{.page_dev_env_desc}}</p>
@@ -159,7 +159,7 @@
     </div>
     -->
 
-    <div class="am-mt-30"></div>
+    <!-- <div class="am-mt-30"></div> -->
     <script src="/self/js/jquery.min.js" type="text/javascript"></script>	
     <script src="/home/home.js?v={{MD5 AppVer}}" type="text/javascript"></script>
 

templates/notice.tmpl

@@ -24,7 +24,7 @@
     color: rgb(16, 16, 16);
   }
   .notice-title a:hover {
-    color: #fb6357;
+    opacity: 0.8;
   }
   .notice-time {
     width: 150px;

web_src/less/openi.less

@@ -94,7 +94,7 @@ footer {
 }
 @media only screen and (min-width: 1600px) {
     .ui.ui.ui.container:not(.fluid) {
-        width: 1200px;
+        width: 1440px;
     }
 }