feat: 官网taro楼层，footer修改 & 折叠面板文案修改 (#499)

* upd: 文案修改

* upd: 文案修改

* feat: taro相关展示和折叠组件文案修改

* feat: taro白色版

* feat: 细节修改

Co-authored-by: richard1015 <51844712@qq.com>

src/packages/__VUE/collapse/demo.vue

@@ -3,10 +3,10 @@
     <h2>基本用法</h2>
     <nut-collapse v-model:active="active1" icon="down-arrow">
       <nut-collapse-item :title="title1" :name="1">
-        京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
+        NutUI是一套拥有京东风格的轻量级的 Vue 组件库
       </nut-collapse-item>
       <nut-collapse-item :title="title2" :name="2">
-        京东到家：教师节期间 创意花束销量增长53倍
+        在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！
       </nut-collapse-item>
       <nut-collapse-item :title="title3" :name="3" disabled>
       </nut-collapse-item>
@@ -14,22 +14,22 @@
     <h2>无icon样式</h2>
     <nut-collapse v-model:active="active4" :accordion="true">
       <nut-collapse-item :title="title1" :name="1">
-        2020年中国数字游戏市场规模超2786亿元
+        引入Vue3新特性 Composition API、Teleport、Emits 等
       </nut-collapse-item>
       <nut-collapse-item :title="title2" :name="2">
-        基于区块链技术的取证APP在浙江省杭州市发布
+        全面使用 TypeScipt
       </nut-collapse-item>
     </nut-collapse>
     <h2>手风琴</h2>
     <nut-collapse v-model:active="active2" :accordion="true" icon="down-arrow">
       <nut-collapse-item :title="title1" :name="1">
-        华为终端操作系统EMUI 11发布，9月11日正式开启
+        基于京东设计语言体系，构建场景
       </nut-collapse-item>
       <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
-        中国服务机器人市场已占全球市场超1/4
+        提高界⾯的模块化通用程度
       </nut-collapse-item>
       <nut-collapse-item :title="title3" :name="3">
-        QuestMobile：90后互联网用户规模超越80后达3.62亿
+        采用组合式 API Composition 语法重构，结构清晰，功能模块化
       </nut-collapse-item>
     </nut-collapse>
     <h2>自定义折叠图标</h2>
@@ -41,10 +41,10 @@
       rotate="90"
     >
       <nut-collapse-item :title="title1" :name="1">
-        京东数科IPO将引入“绿鞋机制”
+        NUTUI3.0重新思考其内在的一致性和可组合性
       </nut-collapse-item>
       <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
-        世界制造业大会开幕，阿里巴巴与安徽合作再升级
+        提⾼产研输出对接的效率，降低输出工作量
       </nut-collapse-item>
     </nut-collapse>
     <h2>自定义标题图标</h2>
@@ -58,10 +58,10 @@
       :accordion="true"
     >
       <nut-collapse-item :title="title1" :name="1">
-        “森亿智能”获4亿元D轮融资
+        组件 emits 事件单独提取，增强代码可读性
       </nut-collapse-item>
       <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
-        快看漫画与全球潮玩集合店X11达成战略合作
+        使用 Teleport 新特性重构挂载类组件
       </nut-collapse-item>
     </nut-collapse>
   </div>

src/packages/__VUE/collapse/doc.md

@@ -7,10 +7,10 @@
 ```html
 <nut-collapse v-model:active="active1" icon="down-arrow">
   <nut-collapse-item :title="title1" :name="1">
-    京东“厂直优品计划”首推“政府优品馆” 3年覆盖80%镇级政府
+    NutUI是一套拥有京东风格的轻量级的 Vue 组件库
   </nut-collapse-item>
   <nut-collapse-item :title="title2" :name="2">
-    京东到家：教师节期间 创意花束销量增长53倍
+    在产品的功能、体验、易用性和灵活性等各个方面做了全面的升级！
   </nut-collapse-item>
   <nut-collapse-item :title="title3" :name="3" disabled>
   </nut-collapse-item>
@@ -36,10 +36,10 @@ setup() {
 ```html
 <nut-collapse v-model:active="activeName" :accordion="true">
   <nut-collapse-item :title="title1" :name="1">
-    2020年中国数字游戏市场规模超2786亿元
+   引入Vue3新特性 Composition API、Teleport、Emits 等
   </nut-collapse-item>
   <nut-collapse-item :title="title2" :name="2">
-    基于区块链技术的取证APP在浙江省杭州市发布
+    全面使用 TypeScipt
   </nut-collapse-item>
 </nut-collapse>
 ```
@@ -66,13 +66,13 @@ setup() {
 ```html
  <nut-collapse v-model:active="activeName" :accordion="true" icon="down-arrow">
   <nut-collapse-item :title="title1" :name="1">
-    华为终端操作系统EMUI 11发布，9月11日正式开启
+    基于京东设计语言体系，构建场景
   </nut-collapse-item>
   <nut-collapse-item :title="title2" :name="2" :sub-title="subTitle">
-    中国服务机器人市场已占全球市场超1/4
+   提高界⾯的模块化通用程度
   </nut-collapse-item>
   <nut-collapse-item :title="title3" :name="3">
-    QuestMobile：90后互联网用户规模超越80后达3.62亿
+  采用组合式 API Composition 语法重构，结构清晰，功能模块化
   </nut-collapse-item>
 </nut-collapse>
 ```
@@ -107,10 +107,10 @@ setup() {
   rotate="90"
 >
   <nut-collapse-item :title="title1" :name="1">
-    京东数科IPO将引入“绿鞋机制”
+      NUTUI3.0重新思考其内在的一致性和可组合性
   </nut-collapse-item>
   <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
-    世界制造业大会开幕，阿里巴巴与安徽合作再升级
+    提⾼产研输出对接的效率，降低输出工作量
   </nut-collapse-item>
 </nut-collapse>
 ```
@@ -143,10 +143,10 @@ return {
   :accordion="true"
 >
   <nut-collapse-item :title="title1" :name="1">
-    “森亿智能”获4亿元D轮融资
+  组件 emits 事件单独提取，增强代码可读性
   </nut-collapse-item>
   <nut-collapse-item :title="title2" :name="2" sub-title="文本内容">
-    快看漫画与全球潮玩集合店X11达成战略合作
+  使用 Teleport 新特性重构挂载类组件
   </nut-collapse-item>
 </nut-collapse>
 ```

src/sites/doc/components/Footer.vue

@@ -157,7 +157,7 @@ export default defineComponent({
       //点击组件以外的地方，收起
       document.addEventListener(
         'click',
-        e => {
+        (e) => {
           console.log('e.target', e.target);
         },
         false
@@ -165,7 +165,7 @@ export default defineComponent({
     };
     // checked active index
     data.activeIndex = data.themeList.findIndex(
-      i => i.color == RefData.getInstance().themeColor.value
+      (i) => i.color == RefData.getInstance().themeColor.value
     );
     const checkTheme = (color: string, index: number) => {
       data.isShowSelect = false;
@@ -222,6 +222,7 @@ export default defineComponent({
     }
     &-desc {
       font-size: 12px;
+      line-height: 30px;
     }
     &-select-hd {
       width: 92px;

src/sites/doc/views/Main.vue

@@ -41,6 +41,14 @@
           <p class="features-desc">遵循京东 App 9.0 设计规范</p>
         </li>
         <li class="features-item">
+          <img src="../../assets/images/img-home-features5.png" />
+          <p class="features-title">适配多端</p>
+          <p class="features-desc a-l"
+            >基于taro使用 nutui 组件库场景覆盖多端小程序、h5等,taro
+            官方推荐框架</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"
@@ -60,6 +68,22 @@
         </li>
       </ul>
     </div>
+    <!-- taro楼层 -->
+    <div class="doc-content-taro">
+      <div class="doc-content-hd">
+        <h4 class="doc-content-title">一处代码 多端运行</h4>
+      </div>
+      <div class="taro-content">
+        <div class="taro-left"> </div>
+        <div class="taro-right">
+          <div class="right-img"></div>
+          <p class="taro-desc"
+            >Taro 官方推荐框架，基于Taro 使用 nutui组件库，场景<br />覆盖多端小程序、h5等</p
+          >
+        </div>
+      </div>
+    </div>
+
     <div class="doc-content-cases" v-if="casesImages.length">
       <div class="doc-content-hd">
         <h4 class="doc-content-title">赋能案例</h4>
@@ -135,21 +159,21 @@ export default defineComponent({
     onMounted(() => {
       // 文章列表接口
       const apiService = new ApiService();
-      apiService.getArticle().then(res => {
+      apiService.getArticle().then((res) => {
         if (res?.state == 0) {
           data.articleList = (res.value.data.arrays as any[])
-            .map(item => {
+            .map((item) => {
               if (item.type == 1) {
                 return item;
               }
             })
-            .filter(i => i);
+            .filter((i) => i);
         }
       });
-      apiService.getCases().then(res => {
+      apiService.getCases().then((res) => {
         if (res?.state == 0) {
           data.casesImages = (res.value.data.arrays as any[])
-            .map(item => {
+            .map((item) => {
               return item.cover_image.split(',');
             })
             .toString()
@@ -160,7 +184,7 @@ export default defineComponent({
       });
     });
     const findCasesItem = (url: string) => {
-      data.currentCaseItem = casesList.find(i => i.cover_image.includes(url));
+      data.currentCaseItem = casesList.find((i) => i.cover_image.includes(url));
     };
     const onLeft = () => {
       let url = data.casesImages.shift() as string;
@@ -174,7 +198,7 @@ export default defineComponent({
     };
 
     const themeName = computed(() => {
-      return function() {
+      return function () {
         return `doc-content-${RefData.getInstance().themeColor.value}`;
       };
     });
@@ -264,7 +288,7 @@ export default defineComponent({
       margin-top: 50px;
     }
     .features-item {
-      width: 296px;
+      width: 198px;
       text-align: center;
       img {
         width: 100px;
@@ -281,6 +305,36 @@ export default defineComponent({
       line-height: 18px;
     }
   }
+  &-taro {
+    width: 1200px;
+    margin: 0 auto 90px;
+    .taro-content {
+      display: flex;
+      .taro-left {
+        margin-left: 50px;
+        width: 453px;
+        height: 386px;
+        background: url('../../assets/images/img-taro-left.png') no-repeat;
+        background-size: cover;
+      }
+      .taro-right {
+        margin-left: 145px;
+        .right-img {
+          width: 436px;
+          height: 213px;
+          background: url('../../assets/images/img-taro-right.png') no-repeat;
+          background-size: cover;
+          margin-bottom: 58px;
+        }
+        .taro-desc {
+          color: #f2f2f2;
+          font-weight: lighter;
+          font-size: 18px;
+          line-height: 30px;
+        }
+      }
+    }
+  }
   &-cases {
     width: 1200px;
     overflow: hidden;
@@ -573,6 +627,33 @@ export default defineComponent({
       color: $theme-white-footer-word3;
     }
   }
+  .taro-content {
+    display: flex;
+    .taro-left {
+      margin-left: 50px;
+      width: 453px;
+      height: 386px;
+      background: url('../../assets/images/img-taro-left-white.png') no-repeat;
+      background-size: cover;
+    }
+    .taro-right {
+      margin-left: 145px;
+      .right-img {
+        width: 436px;
+        height: 213px;
+        background: url('../../assets/images/img-taro-right-white.png')
+          no-repeat;
+        background-size: cover;
+        margin-bottom: 58px;
+      }
+      .taro-desc {
+        color: #1a1a1a;
+        font-weight: lighter;
+        font-size: 18px;
+        line-height: 30px;
+      }
+    }
+  }
 }
 .a-l {
   text-align: left;