📝(home): 更新主页

更新文档

package/document/src/view/index.vue

@@ -32,7 +32,7 @@
           >
           <span
             >{{ t("home.download") }}：<em class="site-showdowns"
-              >12,041</em
+              >12,889</em
             ></span
           >
         </div>
@@ -43,7 +43,7 @@
             rel="nofollow"
             class="site-star"
           >
-            <i class="layui-icon"></i> Star <cite id="getStars">1116</cite>
+            <i class="layui-icon"></i> Star <cite id="getStars">1188</cite>
           </a>
           <a
             href="https://gitee.com/layui-vue"
@@ -64,6 +64,34 @@
         </div>
       </div>
     </div>
+    <div class="box-list">
+      <lay-row :space="30">
+        <lay-col :md="6" :sm="12" :xs="12">
+          <div class="box">
+            <h1 class="title">🌈 Classic design</h1>
+            <p class="details">layui css.</p>
+          </div>
+        </lay-col>
+        <lay-col :md="6" :sm="12" :xs="12">
+          <div class="box">
+            <h1 class="title">🐝 Small volume</h1>
+            <p class="details">only 8.5 MB.</p>
+          </div>
+        </lay-col>
+        <lay-col :md="6" :sm="12" :xs="12">
+          <div class="box">
+            <h1 class="title">🍬 Setup script</h1>
+            <p class="details">use grammar sugar.</p>
+          </div>
+        </lay-col>
+        <lay-col :md="6" :sm="12" :xs="12">
+          <div class="box">
+            <h1 class="title">😋 Quick build</h1>
+            <p class="details">easy to use</p>
+          </div>
+        </lay-col>
+      </lay-row>
+    </div>
     <div class="footer footer-index">
       <p>Released under the <a href="/index.html">MIT License</a>.</p>
       <p>Copyright © 2021-2022 layui-vue.com</p>
@@ -107,18 +135,19 @@ html,
 body {
   height: 100%;
 }
+
 .site-container {
   background: #fff;
   margin-top: 60px;
   height: 100%;
   width: 100%;
 }
+
 .site-banner {
-  height: 100%;
   overflow: hidden;
   text-align: center;
   position: relative;
-  border-bottom: 1px solid #eee;
+  height: calc(100% - 60px);
   background-image: url(../assets/background.svg);
   background-repeat: no-repeat;
   background-size: 100%;
@@ -137,6 +166,7 @@ body {
   margin-top: 72px;
   font-size: 0;
 }
+
 .site-download a {
   position: relative;
   padding: 0 20px 0 20px;
@@ -155,20 +185,25 @@ body {
   -webkit-transition: all 0.5s;
   letter-spacing: 0.2px;
 }
+
 .site-download a:hover {
   border-radius: 10px;
 }
+
 .site-download a:first-child {
   background: #009688;
   color: white;
 }
+
 .site-download a + a {
   margin-left: 20px;
 }
+
 .site-zfj {
   padding-top: 25px;
   height: 220px;
 }
+
 .site-zfj-anim i {
   -webkit-animation-name: site-zfj;
   animation-name: site-zfj;
@@ -177,6 +212,7 @@ body {
   -webkit-animation-timing-function: linear;
   animation-timing-function: linear;
 }
+
 .site-zfj i {
   position: absolute;
   left: 50%;
@@ -187,21 +223,25 @@ body {
   font-size: 180px;
   color: #c2c2c2;
 }
+
 .site-desc-anim {
   -webkit-animation-name: site-desc;
   animation-name: site-desc;
 }
+
 .site-desc {
   position: relative;
   height: 70px;
   margin-top: 20px;
 }
+
 .site-desc .web-font-desc {
   color: #fff;
   color: #213547;
   font-size: 52px;
   opacity: 0.82;
 }
+
 .web-font-desc {
   font-size: 76px;
   line-height: 1.25;
@@ -210,6 +250,7 @@ body {
   max-width: 960px;
   margin: 0 auto;
 }
+
 .site-desc cite {
   position: absolute;
   bottom: -40px;
@@ -218,23 +259,28 @@ body {
   color: rgba(60, 60, 60, 0.7);
   font-style: normal;
 }
+
 .site-version {
   position: relative;
   margin-top: 18px;
   color: rgba(60, 60, 60, 0.7);
   font-size: 12px;
 }
+
 .site-version span {
   padding: 0 3px;
 }
+
 .site-version * {
   font-style: normal;
 }
+
 .site-version a {
   color: rgba(60, 60, 60, 0.7);
   text-decoration: none;
   margin-top: -4px;
 }
+
 .site-banner-other {
   position: relative;
   left: 0;
@@ -245,6 +291,32 @@ body {
   font-size: 0;
 }
 
+.box-list {
+  padding: 50px 250px;
+}
+
+.box {
+  border: 1px solid rgba(60, 60, 60, 0.12);
+  border-radius: 12px;
+  padding: 24px;
+  height: 100%;
+  background-color: #f9f9f9;
+}
+
+.box .title {
+  line-height: 24px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.box .details {
+  padding-top: 8px;
+  line-height: 24px;
+  font-size: 14px;
+  font-weight: 500;
+  color: rgba(60, 60, 60, 0.7);
+}
+
 .site-container .layui-field-title {
   border-top: 1px solid #d2d2d2;
 }
@@ -263,11 +335,13 @@ body {
   transition: all 0.5s;
   -webkit-transition: all 0.5s;
 }
+
 .footer {
   width: 100%;
   padding: 30px 15px;
   line-height: 30px;
   text-align: center;
+  border-top: 1px solid #eee;
   color: rgba(60, 60, 60, 0.7);
   font-weight: 300;
   font-size: 13.6px;