feat: site cases images

src/packages/backtop/demo.vue

@@ -67,7 +67,6 @@ export default createDemo({
     border-radius: 7px;
     box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
     line-height: 19px;
-    font-family: PingFangSC-Medium;
     font-size: 13px;
     color: rgba(102, 102, 102, 1);
   }

src/sites/doc/App.vue

@@ -14,11 +14,6 @@ export default defineComponent({
   color: #fff;
 }
 #doc {
-  font-family: PingFangSC-Regular;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-text-size-adjust: none;
-  -ms-text-size-adjust: 100%;
   background: #fff;
   height: 100%;
   width: 100%;

src/sites/doc/components/Footer.vue

@@ -407,7 +407,6 @@ export default defineComponent({
   .vx-desc {
     margin-bottom: 10px;
     line-height: 17px;
-    font-family: PingFangSC-Regular;
     font-size: 12px;
     color: #1a1a1a;
     &:last-child {

src/sites/doc/views/Main.vue

@@ -63,7 +63,35 @@
         </li>
       </ul>
     </div>
-    <div class="doc-content-more" v-if="articleList.length > 0">
+    <div class="doc-content-cases" v-if="casesImages.length">
+      <div class="doc-content-hd">
+        <h4 class="doc-content-title">赋能案例</h4>
+      </div>
+      <div class="doc-content-cases-content">
+        <div class="doc-content-cases-content__main">
+          <div
+            class="doc-content-cases-content__main-lefticon"
+            @click="onLeft"
+          ></div>
+          <div class="doc-content-cases-content__main-iconinfo">
+            <h4>{{ currentCaseItem.product_name }}</h4>
+            <p>{{ currentCaseItem.product_info }}</p>
+            <img :src="currentCaseItem.logo" />
+          </div>
+          <div class="doc-content-cases-content__main-iphone"></div>
+          <div
+            class="doc-content-cases-content__main-righticon"
+            @click="onRight"
+          ></div>
+        </div>
+        <ul class="doc-content-cases-content__list">
+          <li v-for="img in casesImages">
+            <img :src="img" />
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="doc-content-more" v-if="articleList.length">
       <div class="doc-content-hd">
         <h4 class="doc-content-title">更多内容</h4>
         <a class="sub-more" href="#/resource">More</a>
@@ -89,7 +117,7 @@ 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';
+import { ApiService } from '@/sites/service/ApiService';
 export default defineComponent({
   name: 'main',
   components: {
@@ -98,14 +126,19 @@ export default defineComponent({
   },
   setup() {
     const articleList: any[] = [];
+    let casesList: any[] = [];
+    const casesImages: string[] = [];
+    const currentCaseItem: any = {};
     const data = reactive({
       // theme: 'white',
-      articleList
+      articleList,
+      casesImages,
+      currentCaseItem
     });
     onMounted(() => {
       // 文章列表接口
-      const articleApiService = new ArticleApiService();
-      articleApiService.getArticle().then(res => {
+      const apiService = new ApiService();
+      apiService.getArticle().then(res => {
         if (res?.state == 0) {
           data.articleList = (res.value.data.arrays as any[])
             .map(item => {
@@ -116,7 +149,33 @@ export default defineComponent({
             .filter(i => i);
         }
       });
+      apiService.getCases().then(res => {
+        if (res?.state == 0) {
+          data.casesImages = (res.value.data.arrays as any[])
+            .map(item => {
+              return item.cover_image.split(',');
+            })
+            .toString()
+            .split(',');
+          casesList = res.value.data.arrays as any[];
+          data.currentCaseItem = casesList[0];
+        }
+      });
     });
+    const findCasesItem = (url: string) => {
+      data.currentCaseItem = casesList.find(i => i.cover_image.includes(url));
+    };
+    const onLeft = () => {
+      let url = data.casesImages.shift() as string;
+      findCasesItem(url);
+      data.casesImages.push(url);
+    };
+    const onRight = () => {
+      let url = data.casesImages.pop() as string;
+      findCasesItem(url);
+      data.casesImages.unshift(url);
+    };
+
     const themeName = computed(() => {
       return function() {
         return `doc-content-${themeColor.value}`;
@@ -132,7 +191,9 @@ export default defineComponent({
       toIntro,
       ...toRefs(data),
       themeName,
-      toLink
+      toLink,
+      onLeft,
+      onRight
     };
   }
 });
@@ -191,7 +252,6 @@ export default defineComponent({
   &-title {
     display: inline-block;
     font-size: 26px;
-    font-family: PingFangSC-Medium;
   }
   &-features {
     width: 1200px;
@@ -212,7 +272,6 @@ export default defineComponent({
     }
     .features-title {
       margin-bottom: 20px;
-      font-family: PingFangSC-Medium;
       font-size: 24px;
     }
     .features-desc {
@@ -220,6 +279,96 @@ export default defineComponent({
       line-height: 18px;
     }
   }
+  &-cases {
+    width: 1200px;
+    overflow: hidden;
+    margin: 0 auto 90px;
+    &-content {
+      height: 463px;
+      display: flex;
+      align-items: center;
+      &__main {
+        padding: 0 22px;
+        width: 590px;
+        height: 463px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        background: rgba(71, 71, 83, 1);
+        border-radius: 29px 20px 20px 29px;
+        &-iphone {
+          width: 210px;
+          height: 420px;
+          background-image: url('../../assets/images/iphone-cases.png');
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          z-index: 1;
+        }
+        &-lefticon {
+          margin-right: 20px;
+          width: 36px;
+          height: 36px;
+          background-image: url('../../assets/images/left-arrow.png');
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          cursor: pointer;
+        }
+        &-righticon {
+          margin-left: 20px;
+          width: 36px;
+          height: 36px;
+          background-image: url('../../assets/images/right-arrow.png');
+          background-repeat: no-repeat;
+          background-size: 100% 100%;
+          cursor: pointer;
+          z-index: 1;
+        }
+        &-iconinfo {
+          width: 190px;
+          flex-shrink: 0;
+          display: flex;
+          flex-direction: column;
+          > h4 {
+            line-height: 42px;
+            font-size: 26px;
+            color: rgba(255, 255, 255, 1);
+          }
+          > p {
+            font-size: 18px;
+            margin-bottom: 20px;
+            color: rgba(255, 255, 255, 1);
+          }
+          > img {
+            width: 114px;
+            height: 114px;
+            overflow: hidden;
+            border-radius: 29px;
+          }
+        }
+      }
+      &__list {
+        flex: 1;
+        display: flex;
+        margin-left: -274px;
+        > li {
+          width: 180px;
+          height: 390px;
+          flex-shrink: 0;
+          margin-right: 20px;
+          box-shadow: 0px 1px 7px 0px #edeef1;
+          transition: all 0.5s;
+          &:first-child {
+            margin-right: 120px;
+            transform: scale(1.04);
+          }
+          > img {
+            width: 100%;
+            height: 100%;
+          }
+        }
+      }
+    }
+  }
   &-more {
     width: 1200px;
     margin: 0 auto 80px;
@@ -268,7 +417,6 @@ export default defineComponent({
     min-width: 550px;
     .content-title {
       // line-height: 36px;
-      font-family: PingFangSC-Medium;
       font-size: 42px;
       color: rgba(255, 255, 255, 1);
     }
@@ -282,7 +430,6 @@ export default defineComponent({
     }
     .content-subTitle {
       margin-top: 12px;
-      font-family: PingFangSC-Regular;
       font-size: 20px;
       color: rgba(255, 255, 255, 1);
     }
@@ -301,7 +448,6 @@ export default defineComponent({
           font-size: 14px;
           color: rgba(255, 255, 255, 1);
         }
-        font-family: PingFangSC-Regular;
         width: 150px;
         height: 40px;
         background: linear-gradient(

src/sites/doc/views/Resource.vue

@@ -78,9 +78,8 @@
           class="article-item"
           v-for="item in communityArticleList"
           :key="item.id"
-          @click="toLink(item.id)"
         >
-          <a class="article-link" :href="item.link">
+          <a class="article-link" target="_blank" :href="item.link">
             {{ item.title }} - {{ item.user_name }}
           </a>
         </li>
@@ -99,7 +98,7 @@ import {
 import Header from '@/sites/doc/components/Header.vue';
 import Footer from '@/sites/doc/components/Footer.vue';
 import { currentRoute } from '@/sites/assets/util/ref';
-import { ArticleApiService } from '@/sites/service/ArticleApiService';
+import { ApiService } from '@/sites/service/ApiService';
 export default defineComponent({
   name: 'doc',
   components: {
@@ -134,8 +133,8 @@ export default defineComponent({
       watchDemoUrl(route);
 
       // 文章列表接口
-      const articleApiService = new ArticleApiService();
-      articleApiService.getArticle().then(res => {
+      const apiService = new ApiService();
+      apiService.getArticle().then(res => {
         if (res?.state == 0) {
           (res.value.data.arrays as any[]).forEach(element => {
             if (element.type == 1) {

src/sites/service/ArticleApiService.ts

@@ -1,5 +1,5 @@
 import { HttpClient } from './HttpClient';
-export class ArticleApiService {
+export class ApiService {
   private httpClient: HttpClient;
 
   constructor() {
@@ -12,16 +12,21 @@ export class ArticleApiService {
    */
   getArticle() {
     return this.httpClient.request(
-      '/article/list?pageIndex=1&pageSize=100',
+      '/openapi/article?pageIndex=1&pageSize=100',
       'get',
       {}
     );
   }
   /**
-   * 保存用户访问数据
+   * 获取nutui使用案例
    * @returns
+   * @memberof ArticleApiService
    */
-  saveUserInfo(parmas: any) {
-    return this.httpClient.request('/visit/saveVisitInfo', 'post', parmas);
+  getCases() {
+    return this.httpClient.request(
+      '/openapi/cases?pageIndex=1&pageSize=100',
+      'get',
+      {}
+    );
   }
 }