feat: 首页平台特色、更多内容 (#400)

src/sites/assets/styles/variables.scss

@@ -52,6 +52,7 @@ $theme-white-footer-border: #eaf0fb;
 $theme-white-theme-border: #f5f6f7;
 $theme-white-circle: #fff;
 $theme-white-circle-border: #e5e5e5;
+$theme-white-index-desc: #959fb1;
 
 // 黑色
 $theme-black-word: #ccc;
@@ -82,6 +83,8 @@ $doc-default-nav-color: $title-color;
 // footer
 // $doc-default-header-color: $white;
 // $doc-footer-height: 73px;
+// home
+$theme-black-content-bg: #060506;
 
 //markdown-add-style
 $nutui-doc-black: #323233;

src/sites/doc/views/Main.vue

 <template>
   <doc-header></doc-header>
-  <div class="doc-content-index">
-    <div class="content-left">
-      <div class="content-title"> Nut UI 3.0 </div>
-      <div class="content-smile"> </div>
-      <div class="content-subTitle">一款具有京东风格的VUE组件</div>
-      <div class="content-button">
-        <div class="leftButton" @click="toIntro">
-          <div class="leftButtonText">开始使用</div>
-        </div>
-        <div class="rightButton">
-          <div class="rightButtonText">扫码体验</div>
+  <div class="doc-content" :class="themeName()">
+    <div class="doc-content-index">
+      <div class="content-left">
+        <div class="content-title"> Nut UI 3.0 </div>
+        <div class="content-smile"> </div>
+        <div class="content-subTitle">一款具有京东风格的VUE组件</div>
+        <div class="content-button">
+          <div class="leftButton" @click="toIntro">
+            <div class="leftButtonText">开始使用</div>
+          </div>
+          <div class="rightButton">
+            <div class="rightButtonText">扫码体验</div>
 
-          <div class="qrcodepart">
-            <div class="qrcode-text"> 请使用手机扫码体验 </div>
-            <div class="qrcode"> </div>
+            <div class="qrcodepart">
+              <div class="qrcode-text"> 请使用手机扫码体验 </div>
+              <div class="qrcode"> </div>
+            </div>
           </div>
+          <iframe
+            style="margin-left: 20px"
+            src="https://ghbtns.com/github-btn.html?user=jdf2e&repo=nutui&type=star&count=true&size=large"
+            frameborder="0"
+            scrolling="0"
+            width="170"
+            height="30"
+            title="GitHub"
+          ></iframe>
         </div>
-        <iframe
-          style="margin-left: 20px"
-          src="https://ghbtns.com/github-btn.html?user=jdf2e&repo=nutui&type=star&count=true&size=large"
-          frameborder="0"
-          scrolling="0"
-          width="170"
-          height="30"
-          title="GitHub"
-        ></iframe>
-      </div>
-
-      <!-- <div style="display: flex; align-items: center">
-        <a href="#" class="leftButton">开始使用</a>
-        <a href="javascript:;" class="rightButton ">
-          扫码体验
-          <a>
-            <span>请使用手机扫码体验</span>
-            <img
-              src="https://img12.360buyimg.com/imagetools/jfs/t1/124892/31/7144/6065/5f0d9fe4Ef020d678/cae78d015aa5897c.png"
-              alt
-            />
+        <!-- <div style="display: flex; align-items: center">
+          <a href="#" class="leftButton">开始使用</a>
+          <a href="javascript:;" class="rightButton ">
+            扫码体验
+            <a>
+              <span>请使用手机扫码体验</span>
+              <img
+                src="https://img12.360buyimg.com/imagetools/jfs/t1/124892/31/7144/6065/5f0d9fe4Ef020d678/cae78d015aa5897c.png"
+                alt
+              />
+            </a>
           </a>
-        </a>
-        <iframe
-          style="margin-left: 20px"
-          src="https://ghbtns.com/github-btn.html?user=jdf2e&repo=nutui&type=star&count=true&size=large"
-          frameborder="0"
-          scrolling="0"
-          width="170"
-          height="30"
-          title="GitHub"
-        ></iframe>
-      </div> -->
+          <iframe
+            style="margin-left: 20px"
+            src="https://ghbtns.com/github-btn.html?user=jdf2e&repo=nutui&type=star&count=true&size=large"
+            frameborder="0"
+            scrolling="0"
+            width="170"
+            height="30"
+            title="GitHub"
+          ></iframe>
+        </div> -->
+      </div>
+      <div class="content-right">
+        <div class="content-img"> </div>
+      </div>
     </div>
-    <div class="content-right">
-      <div class="content-img"> </div>
+    <div class="doc-content-features">
+      <div class="doc-content-hd">
+        <h4 class="doc-content-title">平台特色</h4>
+      </div>
+      <ul class="features-list">
+        <li class="features-item">
+          <img src="../../assets/images/img-home-features1.png" />
+          <p class="features-title">京东风格</p>
+          <p class="features-desc">遵循京东App9.0设计规范</p>
+        </li>
+        <li class="features-item">
+          <img src="../../assets/images/img-home-features2.png" />
+          <p class="features-title">组件丰富</p>
+          <p class="features-desc a-l"
+            >提供70+组件，丰富的demo快速体验交互细节，覆盖各类场景满足各种功能的需求</p
+          >
+        </li>
+        <li class="features-item">
+          <img src="../../assets/images/img-home-features3.png" />
+          <p class="features-title">前沿技术</p>
+          <p class="features-desc">Vue3.X vite2.X typescript</p>
+        </li>
+        <li class="features-item">
+          <img src="../../assets/images/img-home-features4.png" />
+          <p class="features-title">贴心通道</p>
+          <p class="features-desc">社区维护 高效服务<br />技术支持 经验沉淀</p>
+        </li>
+      </ul>
+    </div>
+    <div class="doc-content-more" v-if="articleList.length > 0">
+      <div class="doc-content-hd">
+        <h4 class="doc-content-title">更多内容</h4>
+        <a class="sub-more" href="https://jelly.jd.com" target="_blank"
+          >更多内容</a
+        >
+      </div>
+      <ul class="more-list">
+        <li
+          class="more-item"
+          v-for="item in articleList.slice(0, 4)"
+          :key="item.id"
+          @click="toLink(item.id)"
+        >
+          <img :src="item.cover_image" />
+          <p class="more-title">{{ item.title }}</p>
+        </li>
+      </ul>
     </div>
   </div>
+  <doc-footer></doc-footer>
 </template>
 <script lang="ts">
-import { defineComponent, onMounted, reactive } from 'vue';
+import { defineComponent, onMounted, reactive, toRefs, computed } from 'vue';
 import Header from '@/sites/doc/components/Header.vue';
+import Footer from '@/sites/doc/components/Footer.vue';
 import router from '../router';
+import { themeColor } from '@/sites/assets/util/ref';
+import { ArticleApiService } from '@/sites/service/ArticleApiService';
 export default defineComponent({
   name: 'main',
-  components: { [Header.name]: Header },
+  components: {
+    [Header.name]: Header,
+    [Footer.name]: Footer
+  },
   setup() {
-    const data = reactive({});
-
+    const articleList: any[] = [];
+    const data = reactive({
+      // theme: 'white',
+      articleList
+    });
+    onMounted(() => {
+      // 文章列表接口
+      const articleApiService = new ArticleApiService();
+      articleApiService.getArticle().then(res => {
+        console.log('res', res);
+        if (res?.state == 0) {
+          data.articleList = res.value.data.arrays as any[];
+          console.log('data.articleList', data.articleList);
+        }
+      });
+    });
+    const themeName = computed(() => {
+      return function() {
+        return `doc-content-${themeColor.value}`;
+      };
+    });
+    const toLink = (id: number) => {
+      window.open('//jelly.jd.com/article/' + id);
+    };
     function toIntro() {
       router.push({ path: '/intro' });
     }
-
     return {
       toIntro,
-      data
+      ...toRefs(data),
+      themeName,
+      toLink
     };
   }
 });
@@ -89,12 +168,91 @@ export default defineComponent({
     transform: translate3d(0, 0, 0);
   }
 }
-
+.doc-content {
+  &-hd {
+    height: 52px;
+    line-height: 52px;
+    margin-bottom: 50px;
+    text-align: center;
+    .sub-more {
+      float: right;
+      color: $theme-red;
+    }
+  }
+  &-title {
+    display: inline-block;
+    font-size: 36px;
+    font-family: PingFangSC-Medium;
+  }
+  &-features {
+    width: 1230px;
+    margin: 0 auto 90px;
+    .features-list {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 50px;
+    }
+    .features-item {
+      width: 296px;
+      text-align: center;
+      img {
+        width: 160px;
+        height: 160px;
+        margin-bottom: 20px;
+      }
+    }
+    .features-title {
+      margin-bottom: 18px;
+      line-height: 50px;
+      font-family: PingFangSC-Medium;
+      font-size: 36px;
+    }
+    .features-desc {
+      font-size: 18px;
+      line-height: 24px;
+    }
+  }
+  &-more {
+    width: 1200px;
+    margin: 0 auto 80px;
+    .more-list {
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .more-item {
+      width: 280px;
+      margin-right: 26px;
+      cursor: pointer;
+      &:nth-child(4n) {
+        margin-right: 0;
+      }
+      img {
+        width: 280px;
+        height: 170px;
+        margin-bottom: 20px;
+        border-radius: 6px;
+      }
+    }
+    .more-title {
+      width: 280px;
+      height: 44px;
+      line-height: 22px;
+      font-size: 16px;
+      text-overflow: -o-ellipsis-lastline;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+  }
+}
 .doc-content-index {
   display: flex;
   flex: 1;
+  margin-bottom: 70px;
   background-color: #070505;
-
   .content-left {
     padding: 15% 0 0 8.8%;
     // margin: auto 0;
@@ -214,4 +372,48 @@ export default defineComponent({
     }
   }
 }
+.doc-content-black {
+  background: $theme-black-content-bg;
+  color: white;
+  .doc-content-title {
+    color: white;
+  }
+  .doc-content-feature {
+    .features-title {
+      color: white;
+    }
+    .features-desc {
+      color: white;
+    }
+  }
+  .doc-content-more {
+    .more-title {
+      color: #fff;
+    }
+  }
+}
+.doc-content-white,
+.doc-content-red {
+  background: white;
+  color: white;
+  .doc-content-title {
+    color: $theme-white-footer-word3;
+  }
+  .doc-content-features {
+    .features-title {
+      color: $theme-white-word;
+    }
+    .features-desc {
+      color: $theme-white-index-desc;
+    }
+  }
+  .doc-content-more {
+    .more-title {
+      color: $theme-white-footer-word3;
+    }
+  }
+}
+.a-l {
+  text-align: left;
+}
 </style>