Home Explore Help
Sign In
githab
/
nutui
3
0
Fork 0
Files
Browse Source

chore: website mobile

richard1015 4 years ago
parent
a610fcd14a
commit
1c3a652b6a
19 changed files with 21 additions and 2433 deletions
Split View Show Diff Stats
  1. 0 19
      .github/workflows/gh-pages.yml
  2. 0 43
      index.html
  3. 0 1
      package.json
  4. 0 54
      src/config.json
  5. 0 395
      src/sites/doc/components/Footer.vue
  6. 9 73
      src/sites/doc/components/Header.vue
  7. 3 35
      src/sites/doc/components/Nav.vue
  8. 0 189
      src/sites/doc/components/Search.vue
  9. 0 66
      src/sites/doc/router.ts
  10. 0 2
      src/sites/doc/views/Index.vue
  11. 0 848
      src/sites/doc/views/Main.vue
  12. 0 182
      src/sites/doc/views/Notice.vue
  13. 0 105
      src/sites/doc/views/NoticeDetail.vue
  14. 0 298
      src/sites/doc/views/Resource.vue
  15. 0 1
      src/sites/mobile-react/README.md
  16. 4 5
      src/sites/mobile/components/Index.vue
  17. 0 44
      src/sites/service/ApiService.ts
  18. 0 68
      src/sites/service/HttpClient.ts
  19. 5 5
      vite.config.ts

+ 0 - 19
.github/workflows/gh-pages.yml
View File 

@@ -1,19 +0,0 @@
 
-name: github pages
 
-
 
-on:
 
-  push:
 
-    branches:
 
-      - next # default branch
 
-
 
-jobs:
 
-  deploy:
 
-    runs-on: ubuntu-latest
 
-    steps:
 
-      - uses: actions/checkout@v2
 
-      - run: yarn install
 
-      - run: yarn build:gh-pages
 
-      - name: Deploy
 
-        uses: peaceiris/actions-gh-pages@v3
 
-        with:
 
-          github_token: ${{ secrets.GITHUB_TOKEN }}
 
-          publish_dir: ./dist/3x

+ 0 - 43
index.html
View File 

@@ -14,32 +14,6 @@
 
     <meta http-equiv="Cache-Control" content="no-cache" />
 
     <meta http-equiv="Pragma" content="no-cache" />
 
     <meta http-equiv="Expires" content="0" />
 
-    <script crossorigin src="https://sgm-static.jd.com/sgm-pc-1.0.1.js" name="SGMH5" sid="3df6f31cb70143f09b19bd426bfdbe30" appKey="nutui-site" ></script>
 
-    <style>
 
-      html {
 
-        background: #f7f7f7;
 
-      }
 
-
 
-      a[title="站长统计"] {
 
-        display: none;
 
-      }
 
-    </style>
 
-    <!-- Hotjar Tracking Code for nutui.jd.com -->
 
-    <script async>
 
-      (function(h, o, t, j, a, r) {
 
-        h.hj =
 
-          h.hj ||
 
-          function() {
 
-            (h.hj.q = h.hj.q || []).push(arguments);
 
-          };
 
-        h._hjSettings = { hjid: 1900179, hjsv: 6 };
 
-        a = o.getElementsByTagName("head")[0];
 
-        r = o.createElement("script");
 
-        r.async = 1;
 
-        r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
 
-        a.appendChild(r);
 
-      })(window, document, "https://static.hotjar.com/c/hotjar-", ".js?sv=");
 
-    </script>
 
   </head>
 
   <body>
 
     <noscript>
 
@@ -51,22 +25,5 @@
 
     </noscript>
 
     <div id="doc"></div>
 
     <script type="module" src="./src/sites/doc/main.ts"></script>
 
-    <script type="text/javascript">
 
-      var jaq = jaq || [];
 
-      jaq.push(["account", "JA2018_1831300"]);
 
-      jaq.push(["domain", "jd.com"]);
 
-      (function() {
 
-        var ja = document.createElement("script");
 
-        ja.type = "text/javascript";
 
-        ja.async = true;
 
-        ja.src = "//wl.jd.com/joya.js";
 
-        var s = document.getElementsByTagName("script")[0];
 
-        s.parentNode.insertBefore(ja, s);
 
-      })();
 
-    </script>
 
-    <script
 
-      type="text/javascript"
 
-      src="https://s23.cnzz.com/z_stat.php?id=1276268086&web_id=1276268086"
 
-    ></script>
 
   </body>
 
 </html>

+ 0 - 1
package.json
View File 

@@ -39,7 +39,6 @@
 
     "dev:taro:vue": "npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:weapp",
 
     "dev:taro:h5": "npm run checked:taro:vue && cd src/sites/mobile-taro/vue/ && npm run dev:h5",
 
     "build:site": "npm run checked && vite build",
 
-    "build:gh-pages": "npm run checked && vite build --base=/nutui/",
 
     "build:site:oss": "npm run checked && vite build --base=/nutui/3x/",
 
     "build": "npm run checked && vite build --config vite.config.build.ts && vite build --config vite.config.build.disperse.ts && npm run generate:types && npm run generate:themes && vite build --config vite.config.build.css.ts",
 
     "build:taro:vue": "npm run checked:taro:vue && vite build --config vite.config.build.taro.vue.ts && vite build --config vite.config.build.taro.vue.disperse.ts && npm run generate:types && npm run generate:themes && vite build --config vite.config.build.css.ts",

+ 0 - 54
src/config.json
View File 

@@ -1,58 +1,4 @@
 
 {
 
-  "versions": [
 
-    {
 
-      "name": "1.x",
 
-      "link": "/1x/"
 
-    },
 
-    {
 
-      "name": "2.x",
 
-      "link": "/2x/"
 
-    },
 
-    {
 
-      "name": "3.x",
 
-      "link": "/"
 
-    },
 
-    {
 
-      "name": "nutui-jdl",
 
-      "link": "/jdl/"
 
-    },
 
-    {
 
-      "name": "nutui-react",
 
-      "link": "https://github.com/jdf2e/nutui/tree/nutui-react"
 
-    }
 
-  ],
 
-  "header": [
 
-    {
 
-      "name": "intro,theme,start",
 
-      "cName": "指南",
 
-      "path": "#/intro"
 
-    },
 
-    {
 
-      "name": "component",
 
-      "cName": "组件",
 
-      "path": "#/button"
 
-    },
 
-    {
 
-      "name": "example",
 
-      "cName": "示例",
 
-      "path": "demo.html"
 
-    },
 
-    {
 
-      "name": "resource",
 
-      "cName": "资源",
 
-      "path": "#/resource"
 
-    },
 
-    {
 
-      "name": "notice",
 
-      "cName": "通知",
 
-      "path": "#/notice"
 
-    },
 
-    {
 
-      "name": "joinus",
 
-      "cName": "加入我们",
 
-      "path": "#/joinus"
 
-    }
 
-  ],
 
   "docs": {
 
     "name": "指南",
 
     "packages": [

+ 0 - 395
src/sites/doc/components/Footer.vue
View File 

@@ -1,395 +0,0 @@
 
-<template>
 
-  <div class="doc-footer" :class="`doc-footer-${themeColor}`">
 
-    <div class="doc-footer-content">
 
-      <div class="doc-footer-list">
 
-        <img class="doc-footer-logo" src="../../assets/images/logo-header-red.png" />
 
-      </div>
 
-      <div class="doc-footer-list">
 
-        <h4 class="doc-footer-title">相关产品</h4>
 
-        <div class="doc-footer-item"><a class="sub-link" target="_blank" href="https://vuejs.org" v-hover>Vue</a> </div>
 
-        <div class="doc-footer-item"
 
-          ><a class="sub-link" target="_blank" href="https://vitejs.dev" v-hover>Vite</a>
 
-        </div>
 
-        <div class="doc-footer-item"
 
-          ><a class="sub-link" target="_blank" href="https://relay.jd.com" v-hover>Relay</a>
 
-        </div>
 
-        <div class="doc-footer-item"
 
-          ><a class="sub-link" target="_blank" href="https://taro.jd.com" v-hover>Taro</a>
 
-        </div>
 
-        <div class="doc-footer-item"
 
-          ><a class="sub-link" target="_blank" href="https://ling.jd.com/jdw" v-hover>羚珑</a>
 
-        </div>
 
-      </div>
 
-      <div class="doc-footer-list">
 
-        <h4 class="doc-footer-title">社区</h4>
 
-        <div class="doc-footer-item"
 
-          ><a class="sub-link" target="_blank" href="https://github.com/jdf2e/nutui" v-hover>GitHub</a></div
 
-        >
 
-        <div class="doc-footer-item"
 
-          ><a class="sub-link" target="_blank" href="https://www.zhihu.com/column/c_1263837684834889728" v-hover
 
-            >知乎专栏</a
 
-          ></div
 
-        >
 
-        <div class="doc-footer-item"
 
-          ><a class="sub-link" target="_blank" href="timline://chat/?topin=82957939&type=2" v-hover
 
-            >咚咚群：82957939</a
 
-          ></div
 
-        >
 
-
 
-        <div class="doc-footer-item vx-item">
 
-          <span v-hover>微信</span>
 
-          <i class="icon-vx"></i>
 
-          <div class="vx-box">
 
-            <p class="vx-desc">微信交流群</p>
 
-            <p class="vx-desc">扫码添加好友</p>
 
-            <img class="img-code" src="../../assets/images/vx-code1.png" />
 
-            <p class="vx-desc">回复<span class="vx-red">NutUI</span>即刻进群</p>
 
-          </div>
 
-        </div>
 
-
 
-        <div class="doc-footer-item"><a class="sub-link" href="#/notice" target="_blank" v-hover>常见问题</a></div>
 
-      </div>
 
-      <div class="doc-footer-list">
 
-        <h4 class="doc-footer-title">关于我们</h4>
 
-        <div class="doc-footer-item"><a class="sub-link" href="#/joinus" v-hover>加入我们</a></div>
 
-        <div class="doc-footer-item"><a class="sub-link" href="mailto:nutui@jd.com" v-hover>联系我们</a></div>
 
-        <div class="doc-footer-item"
 
-          ><a class="sub-link" target="_blank" href="https://github.com/jdf2e/nutui/issues" v-hover>意见反馈</a></div
 
-        >
 
-        <div class="doc-footer-item"
 
-          ><a class="sub-link" target="_blank" href="https://fe.jd.com" v-hover>京东前端</a></div
 
-        >
 
-      </div>
 
-      <div class="doc-footer-list" @click.stop="data.isShowSelect = !data.isShowSelect">
 
-        <div class="doc-footer-select-hd"><i class="icon-color"></i>主题换肤</div>
 
-        <div class="doc-footer-select-bd" v-show="data.isShowSelect">
 
-          <div
 
-            class="doc-footer-select-item"
 
-            v-for="(item, index) in data.themeList"
 
-            :key="index"
 
-            @click.stop="checkTheme(item.color, index)"
 
-            :class="{ active: data.activeIndex === index }"
 
-          >
 
-            <i :class="`circle-${item.color}`"></i>{{ item.name }}
 
-          </div>
 
-        </div>
 
-      </div>
 
-    </div>
 
-    <p class="doc-footer-desc">2021 京东零售 - 基础业务体验部.&nbsp;All Rights Reserved.</p>
 
-  </div>
 
-</template>
 
-<script lang="ts">
 
-import { defineComponent, reactive } from 'vue';
 
-import { RefData } from '@/sites/assets/util/ref';
 
-export default defineComponent({
 
-  name: 'doc-footer',
 
-  setup() {
 
-    const data = reactive({
 
-      themeList: [
 
-        {
 
-          name: '热情红',
 
-          color: 'red'
 
-        },
 
-        {
 
-          name: '暗黑风',
 
-          color: 'black'
 
-        },
 
-        {
 
-          name: '纯净白',
 
-          color: 'white'
 
-        }
 
-      ],
 
-      activeIndex: 0,
 
-      isShowSelect: false
 
-    });
 
-    const clickOut = () => {
 
-      //点击组件以外的地方，收起
 
-      document.addEventListener(
 
-        'click',
 
-        (e) => {
 
-          console.log('e.target', e.target);
 
-        },
 
-        false
 
-      );
 
-    };
 
-    // checked active index
 
-    data.activeIndex = data.themeList.findIndex((i) => i.color == RefData.getInstance().themeColor.value);
 
-    const checkTheme = (color: string, index: number) => {
 
-      data.isShowSelect = false;
 
-      data.activeIndex = index;
 
-      RefData.getInstance().themeColor.value = color;
 
-      localStorage.setItem('nutui-theme-color', color);
 
-    };
 
-    return {
 
-      themeColor: RefData.getInstance().themeColor,
 
-      data,
 
-      clickOut,
 
-      checkTheme
 
-    };
 
-  }
 
-});
 
-</script>
 
-
 
-<style lang="scss">
 
-.doc {
 
-  &-footer {
 
-    padding: 30px 80px 20px;
 
-    text-align: center;
 
-    &-content {
 
-      width: 1200px;
 
-      margin: 0 auto;
 
-      display: flex;
 
-      justify-content: space-between;
 
-      align-items: flex-start;
 
-    }
 
-    &-list {
 
-      position: relative;
 
-      &:first-child {
 
-        margin-right: 65px;
 
-      }
 
-    }
 
-    &-logo {
 
-      margin-top: 8px;
 
-    }
 
-    &-title {
 
-      margin-bottom: 24px;
 
-      font-size: 16px;
 
-      font-weight: bold;
 
-      text-align: left;
 
-    }
 
-    &-item {
 
-      margin-bottom: 14px;
 
-      line-height: 17px;
 
-      font-size: 12px;
 
-      text-align: left;
 
-      cursor: pointer;
 
-      .sub-link {
 
-        // cursor: pointer;
 
-      }
 
-    }
 
-    &-desc {
 
-      font-size: 12px;
 
-      line-height: 30px;
 
-    }
 
-    &-select-hd {
 
-      width: 92px;
 
-      height: 32px;
 
-      padding: 0 10px;
 
-      line-height: 32px;
 
-      font-size: 12px;
 
-      text-align: left;
 
-      border-width: 1px;
 
-      border-style: solid;
 
-      border-radius: 2px;
 
-      cursor: pointer;
 
-    }
 
-    &-select-bd {
 
-      position: absolute;
 
-      border-radius: 2px;
 
-      text-align: left;
 
-    }
 
-    &-select-item {
 
-      width: 92px;
 
-      height: 32px;
 
-      padding: 0 10px;
 
-      line-height: 32px;
 
-      font-size: 12px;
 
-      border-width: 0px 1px 1px;
 
-      border-style: solid;
 
-      border-radius: 2px;
 
-      cursor: pointer;
 
-    }
 
-    .icon-color {
 
-      display: inline-block;
 
-      width: 12px;
 
-      height: 10px;
 
-      margin-right: 10px;
 
-      background: url('../../assets/images/icon-color.png') no-repeat center/100%;
 
-    }
 
-    .circle-red,
 
-    .circle-black,
 
-    .circle-white {
 
-      position: relative;
 
-      top: -1px;
 
-      display: inline-block;
 
-      width: 12px;
 
-      height: 12px;
 
-      margin-right: 10px;
 
-      border-radius: 50%;
 
-      vertical-align: middle;
 
-    }
 
-  }
 
-}
 
-// 颜色
 
-.doc-footer {
 
-  // height: 240px;
 
-  // 黑色
 
-  &-black {
 
-    background: $theme-black-footer-bg;
 
-    border-top: 1px solid $theme-black-footer-border;
 
-    .doc-footer {
 
-      &-title {
 
-        color: $theme-black-footer-word1;
 
-      }
 
-      &-item {
 
-        color: $theme-black-footer-word2;
 
-        .sub-link {
 
-          color: $theme-black-footer-word2;
 
-        }
 
-      }
 
-      &-desc {
 
-        color: $theme-black-footer-word4;
 
-      }
 
-      &-select-hd {
 
-        color: $theme-black-footer-word2;
 
-        // background: rgba(29, 29, 33, 1);
 
-        border-color: $theme-black-theme-border;
 
-        &:hover {
 
-          color: $theme-black-footer-hover;
 
-        }
 
-      }
 
-      &-select-item {
 
-        color: $theme-black-footer-word2;
 
-        // background: rgba(29, 29, 33, 1);
 
-        border-color: $theme-black-theme-border;
 
-        .circle-red {
 
-          background: $theme-red-gradient;
 
-        }
 
-        .circle-black {
 
-          background: $theme-black-circle;
 
-          border: 1px solid $theme-black-theme-border;
 
-        }
 
-        .circle-white {
 
-          background: $theme-white-circle;
 
-        }
 
-        &:hover {
 
-          background-color: $theme-black-theme-border;
 
-          .circle-black {
 
-            border-color: $theme-black-circle;
 
-          }
 
-        }
 
-        &.active {
 
-          background-color: $theme-black-footer-hover;
 
-          border-color: $theme-black-footer-hover;
 
-          .circle-red {
 
-            border: 1px solid $theme-red-border;
 
-          }
 
-          .circle-black {
 
-            border-color: $theme-black-footer-bg;
 
-          }
 
-        }
 
-      }
 
-    }
 
-  }
 
-  // 白色、红色
 
-  &-white,
 
-  &-red {
 
-    background: $theme-white-footer-bg;
 
-    border-top: 1px solid $theme-white-footer-border;
 
-    .doc-footer {
 
-      &-title {
 
-        color: $theme-white-footer-word1;
 
-      }
 
-      &-item {
 
-        color: $theme-white-footer-word2;
 
-        .sub-link {
 
-          color: $theme-white-footer-word2;
 
-        }
 
-      }
 
-      &-desc {
 
-        color: $theme-white-footer-word4;
 
-      }
 
-      &-select-hd {
 
-        color: $theme-white-footer-word2;
 
-        // background: rgba(29, 29, 33, 1);
 
-        border-color: $theme-white-theme-border;
 
-        &:hover {
 
-          color: $theme-white-footer-hover;
 
-        }
 
-      }
 
-      &-select-item {
 
-        color: $theme-white-footer-word2;
 
-        // background: rgba(29, 29, 33, 1);
 
-        border-color: $theme-white-theme-border;
 
-        .circle-red {
 
-          background: $theme-red-gradient;
 
-        }
 
-        .circle-black {
 
-          background: $theme-black-circle;
 
-          border: 1px solid $theme-black-circle;
 
-        }
 
-        .circle-white {
 
-          background: $theme-white-circle;
 
-          border: 1px solid $theme-white-circle-border;
 
-        }
 
-        &:hover {
 
-          color: $theme-white-footer-word3;
 
-          background-color: $theme-white-theme-border;
 
-          .circle-black {
 
-            border-color: $theme-black-circle;
 
-          }
 
-        }
 
-        &.active {
 
-          color: $theme-white;
 
-          background-color: $theme-white-footer-hover;
 
-          border-color: $theme-white-footer-hover;
 
-          .circle-red {
 
-            border: 1px solid $theme-red-border;
 
-          }
 
-          .circle-black {
 
-            border-color: $theme-black-circle;
 
-          }
 
-          .circle-white {
 
-            border-color: $theme-white-circle;
 
-          }
 
-        }
 
-      }
 
-    }
 
-  }
 
-}
 
-.vx-item {
 
-  position: relative;
 
-  &:hover {
 
-    .vx-box {
 
-      display: block;
 
-    }
 
-  }
 
-}
 
-.icon-vx {
 
-  display: inline-block;
 
-  width: 13px;
 
-  height: 13px;
 
-  margin-left: 5px;
 
-  vertical-align: -2px;
 
-  background: url('../../assets/images/icon-footer-vx.png') no-repeat center/100%;
 
-}
 
-.vx-box {
 
-  display: none;
 
-  position: absolute;
 
-  right: -144px;
 
-  top: -160px;
 
-  padding: 20px 30px;
 
-  background: rgba(255, 255, 255, 1);
 
-  border: 1px solid rgba(238, 238, 238, 1);
 
-  box-shadow: 0px 2px 4px 0px rgba(143, 143, 143, 0.5);
 
-  .vx-desc {
 
-    margin-bottom: 10px;
 
-    line-height: 17px;
 
-    font-size: 12px;
 
-    color: #1a1a1a;
 
-    &:last-child {
 
-      margin-bottom: 0;
 
-    }
 
-  }
 
-  .img-code {
 
-    width: 121px;
 
-    height: 121px;
 
-    margin-bottom: 10px;
 
-  }
 
-  .vx-red {
 
-    margin: 0 4px;
 
-    font-weight: bold;
 
-    color: #fa2c19;
 
-  }
 
-}
 
-</style>

+ 9 - 73
src/sites/doc/components/Header.vue
View File 

@@ -1,9 +1,4 @@
 
 <template>
 
-  <!-- <div class="doc-header" :style="{ background: themeColor === 'red' ? headerBg : themeColor }" :class="`doc-header-${data.theme}`"> -->
 
-  <div class="v3-banner" :class="{ active: true }">
 
-    NutUI 正在参与 OSC 2021 年度中国开源项目评选（您的鼓励是我们坚持不懈的源动力)，请为我们投上宝贵的一票吧。
 
-    <a href="https://www.oschina.net/project/top_cn_2021/?id=65&fr=nutui" target="_blank">去投票</a>
 
-  </div>
 
   <div class="doc-header" :class="themeName()">
 
     <div class="header-logo">
 
       <a class="logo-link" href="#" @click="toHome"></a>
 
@@ -11,59 +6,20 @@
 
       <span class="version">{{ version }}</span>
 
     </div>
 
     <div class="header-nav">
 
-      <Search />
 
-      <div class="nav-box">
 
-        <ul class="nav-list">
 
-          <li class="nav-item" v-for="item in header" :key="item.name" :class="{ active: isActive(item.name) }">
 
-            <a :href="item.path">
 
-              {{ item.cName }}
 
-            </a>
 
-          </li>
 
-          <li class="nav-item">
 
-            <div
 
-              @focus="handleFocus"
 
-              @focusout="handleFocusOut"
 
-              tabindex="0"
 
-              class="header-select-box"
 
-              @click.stop="data.isShowSelect = !data.isShowSelect"
 
-              :class="[data.isShowSelect == true ? 'select-up' : 'select-down']"
 
-            >
 
-              <div class="header-select-hd">{{ data.verson }}<i class=""></i></div>
 
-              <transition name="fade">
 
-                <div class="header-select-bd" v-show="data.isShowSelect">
 
-                  <div
 
-                    class="header-select-item"
 
-                    v-for="(item, index) in versions"
 
-                    :key="index"
 
-                    @click.stop="checkTheme(item)"
 
-                    :class="{ active: data.activeIndex === index }"
 
-                  >
 
-                    {{ item.name }}
 
-                  </div>
 
-                </div>
 
-              </transition>
 
-            </div>
 
-          </li>
 
-          <li class="nav-item">
 
-            <a class="user-link" target="_blank" href="https://github.com/jdf2e/nutui"></a>
 
-            <a class="user-link gitee" target="_blank" href="https://gitee.com/jd-platform-opensource/nutui"></a>
 
-          </li>
 
-        </ul>
 
-      </div>
 
+      <a href="https://github.com/jdf2e/nutui-docs" target="_blank"
 
+        >当前环境：development ,代码 PR 合并后，文档会自动同步至 https://github.com/jdf2e/nutui-docs</a
 
+      >
 
     </div>
 
   </div>
 
 </template>
 
 <script lang="ts">
 
 import { defineComponent, reactive, computed, onMounted } from 'vue';
 
-import Search from './Search.vue';
 
-import { header, versions, nav } from '@/config.json';
 
+import { nav } from '@/config.json';
 
 import { version } from '/package.json';
 
 import { RefData } from '@/sites/assets/util/ref';
 
 export default defineComponent({
 
   name: 'doc-header',
 
-  components: {
 
-    Search
 
-  },
 
+  components: {},
 
   setup() {
 
     let packages = [] as any[];
 
     nav.forEach((item) => {
 
@@ -114,8 +70,6 @@ export default defineComponent({
 
       window.location.href = item.link;
 
     };
 
     return {
 
-      header,
 
-      versions,
 
       version,
 
       data,
 
       toHome,
 
@@ -130,32 +84,11 @@ export default defineComponent({
 
 </script>
 
 
 <style lang="scss">
 
-.v3-banner {
 
-  position: fixed;
 
-  top: 0;
 
-  transition: all 0.3s;
 
-  > a {
 
-    color: #fff;
 
-    font-weight: bold;
 
-  }
 
-  font-size: 14px;
 
-  width: 100%;
 
-  z-index: 999;
 
-  text-align: center;
 
-  padding: 10px 60px;
 
-  color: #fff;
 
-  background: linear-gradient(
 
-    135deg,
 
-    rgba(242, 20, 12, 1) 0%,
 
-    rgba(232, 34, 14, 1) 69.83950099728881%,
 
-    rgba(242, 77, 12, 1) 100%
 
-  );
 
-}
 
 .doc {
 
   &-header {
 
     position: fixed;
 
     z-index: 2;
 
-    top: 40px;
 
+    top: 0;
 
     left: 0;
 
     right: 0;
 
     min-width: 1300px;
 
@@ -205,6 +138,9 @@ export default defineComponent({
 
     width: calc(100% - 240px);
 
     min-width: 900px;
 
     padding: 0 40px;
 
+    > a {
 
+      color: #fff;
 
+    }
 
     .nav-box {
 
       margin-right: 140px;
 
       .nav-list {

+ 3 - 35
src/sites/doc/components/Nav.vue
View File 

@@ -1,40 +1,11 @@
 
 <template>
 
   <div class="doc-nav">
 
-    <ol>
 
-      <li>
 
-        {{ docs.name }}
 
-      </li>
 
-      <ul>
 
-        <li
 
-          :class="{ active: isActive(_package.name) }"
 
-          v-for="_package in docs.packages"
 
-          :key="_package"
 
-          v-show="_package.show"
 
-        >
 
-          <router-link
 
-            v-if="!_package.isLink"
 
-            :to="_package.name.toLowerCase()"
 
-            >{{ _package.cName }}</router-link
 
-          >
 
-          <a v-else :href="_package.name" target="_blank">{{
 
-            _package.cName
 
-          }}</a>
 
-        </li>
 
-      </ul>
 
-    </ol>
 
     <ol v-for="_nav in nav" :key="_nav">
 
       <li>{{ _nav.name }}</li>
 
       <ul>
 
-        <template
 
-          :class="{ active: isActive(_package.name) }"
 
-          v-for="_package in _nav.packages"
 
-          :key="_package"
 
-        >
 
+        <template :class="{ active: isActive(_package.name) }" v-for="_package in _nav.packages" :key="_package">
 
           <li v-if="_package.show">
 
-            <router-link
 
-              :to="_package.name.toLowerCase()"
 
-              :class="{ active: isActive(_package.name) }"
 
-            >
 
+            <router-link :to="_package.name.toLowerCase()" :class="{ active: isActive(_package.name) }">
 
               {{ _package.name }}&nbsp;&nbsp;<b>{{ _package.cName }}</b>
 
             </router-link>
 
           </li>
 
@@ -53,10 +24,7 @@ export default defineComponent({
 
     const isActive = computed(() => {
 
       return function (name: string) {
 
         const currentValue = RefData.getInstance().currentRoute.value;
 
-        let value =
 
-          currentValue.indexOf('-taro') > -1
 
-            ? currentValue.split('-taro')[0]
 
-            : currentValue;
 
+        let value = currentValue.indexOf('-taro') > -1 ? currentValue.split('-taro')[0] : currentValue;
 
         return value == name.toLowerCase();
 
       };
 
     });

+ 0 - 189
src/sites/doc/components/Search.vue
View File 

@@ -1,189 +0,0 @@
 
-<template>
 
-  <div class="search-box">
 
-    <input
 
-      type="text"
 
-      class="search-input"
 
-      placeholder="在 NutUI 中搜索"
 
-      v-model="data.searchVal"
 
-      @focus="onfocus"
 
-      @blur="onblur"
 
-      @keyup="choseList"
 
-    />
 
-    <ul class="search-list" v-show="data.searchList.length > 0">
 
-      <li
 
-        :class="data.searchCurName == item.name ? 'cur' : ''"
 
-        @click="checklist(item)"
 
-        v-for="(item, index) in data.searchList"
 
-        :key="index"
 
-      >
 
-        <router-link :to="item.name.toLowerCase()">
 
-          {{ item.name }}
 
-          <span>{{ item.cName }}</span>
 
-        </router-link>
 
-      </li>
 
-    </ul>
 
-  </div>
 
-</template>
 
-<script>
 
-import { defineComponent, reactive, onMounted, watch } from 'vue';
 
-import { nav } from '@/config.json';
 
-import { useRouter } from 'vue-router';
 
-export default defineComponent({
 
-  name: 'search',
 
-  setup() {
 
-    const router = useRouter();
 
-    const data = reactive({
 
-      nav,
 
-      navList: [],
 
-      searchIndex: 0,
 
-      searchList: [],
 
-      searchVal: '',
 
-      searchCName: ''
 
-    });
 
-    onMounted(() => {
 
-      // console.log('nav', nav);
 
-      nav.forEach((item) => {
 
-        item.packages.forEach((value) => {
 
-          // console.log('value', value)
 
-          data.navList.push(value);
 
-        });
 
-        // console.log('search', data.navList);
 
-      });
 
-    });
 
-    watch(
 
-      () => data.searchVal,
 
-      (sVal) => {
 
-        if (sVal) {
 
-          data.searchList = data.navList.filter((item) => {
 
-            if (item.show === false) return false;
 
-            // console.log('item', item);
 
-            const rx = new RegExp(sVal, 'gi');
 
-            return rx.test(item.name + ' ' + item.cName + '' + item.desc);
 
-          });
 
-          // console.log('rx2', data.searchList.length, data.searchList);
 
-        } else {
 
-          data.searchCName = '';
 
-          data.searchIndex = 0;
 
-          data.searchList = [];
 
-        }
 
-        // console.log(data.searchList)
 
-      }
 
-    );
 
-    const onfocus = (e) => {
 
-      // e.target.select();
 
-    };
 
-    const onblur = (e) => {
 
-      setTimeout(() => {
 
-        data.searchList = [];
 
-        data.searchVal = '';
 
-      }, 200);
 
-    };
 
-    const checklist = () => {
 
-      data.searchVal = '';
 
-      data.searchCurName = '';
 
-      data.searchIndex = 0;
 
-    };
 
-    const choseList = (e) => {
 
-      let searchIndex = data.searchIndex;
 
-      if (e.keyCode == 40) {
 
-        searchIndex++;
 
-      }
 
-      if (e.keyCode == 38) {
 
-        searchIndex--;
 
-      }
 
-      if (searchIndex < 0) {
 
-        searchIndex = 0;
 
-      }
 
-      const searchList = data.searchList;
 
-      if (searchList.length > 0) {
 
-        const cName = searchList[searchIndex] && searchList[searchIndex].name;
 
-        if (cName) {
 
-          data.searchCurName = cName;
 
-          data.searchIndex = searchIndex;
 
-          if (e.keyCode == 13) {
 
-            router.push({
 
-              path: '/' + searchList[searchIndex].name
 
-            });
 
-            data.searchCurName = '';
 
-            data.searchIndex = 0;
 
-            data.searchVal = '';
 
-          }
 
-        }
 
-      }
 
-    };
 
-    return {
 
-      data,
 
-      onfocus,
 
-      choseList,
 
-      onblur,
 
-      checklist
 
-    };
 
-  }
 
-});
 
-</script>
 
-<style lang="scss">
 
-.search-box {
 
-  position: relative;
 
-  min-width: 300px;
 
-  height: 22px;
 
-  line-height: 22px;
 
-  .search-input {
 
-    height: 22px;
 
-    padding-left: 42px;
 
-    font-size: 14px;
 
-    vertical-align: middle;
 
-    background-color: transparent;
 
-    background-image: url('../../assets/images/input-search.png');
 
-    background-repeat: no-repeat;
 
-    font-size: 14px;
 
-    color: #fff;
 
-    &:focus {
 
-      outline: none;
 
-    }
 
-  }
 
-}
 
-.search-list {
 
-  background: #fff;
 
-  position: absolute;
 
-  width: 300px;
 
-  list-style: none;
 
-  border: 1px solid #f2f2f2;
 
-  z-index: 99999;
 
-  top: 27px;
 
-  padding: 0;
 
-  li {
 
-    height: 40px;
 
-    line-height: 40px;
 
-    font-size: 12px;
 
-    a {
 
-      display: inline-block;
 
-      box-sizing: border-box;
 
-      width: 100%;
 
-      padding-left: 40px;
 
-      text-decoration: none;
 
-      color: #666;
 
-    }
 
-    &:hover {
 
-      // background: #6096ff;
 
-      color: #fa2c19;
 
-      a {
 
-        color: #fa2c19;
 
-      }
 
-    }
 
-  }
 
-  .cur {
 
-    background: #fa2c19;
 
-    color: #fff;
 
-    &:hover {
 
-      color: #fff;
 
-      font-weight: bold;
 
-      a {
 
-        color: #fff;
 
-      }
 
-    }
 
-    a {
 
-      color: #fff;
 
-    }
 
-  }
 
-}
 
-</style>

+ 0 - 66
src/sites/doc/router.ts
View File 

@@ -1,25 +1,9 @@
 
 /* eslint-disable @typescript-eslint/no-var-requires */
 
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
 
 import Index from './views/Index.vue';
 
-import Resource from './views/Resource.vue';
 
-import Notice from './views/Notice.vue';
 
-import NoticeDetail from './views/NoticeDetail.vue';
 
-import Main from './views/Main.vue';
 
 import config from '../config/env';
 
 const pagesRouter: Array<RouteRecordRaw> = [];
 
 
-/** webpack */
 
-// const files = require.context('@/packages', true, /doc\.md$/);
 
-// files.keys().forEach(component => {
 
-//   const componentEntity = files(component).default;
 
-//   const name = `${component.split('/')[1]}`;
 
-//   pagesRouter.push({
 
-//     path: '/' + name,
 
-//     component: componentEntity,
 
-//     name
 
-//   });
 
-// });
 
-
 
 /** vite */
 
 const modulesPage = import.meta.glob('/src/packages/__VUE/**/doc.md');
 
 for (const path in modulesPage) {
 
@@ -42,55 +26,12 @@ for (const path in modulesPageTaro) {
 
   });
 
 }
 
 
-/** webpack */
 
-// const docs = require.context('@/docs', true, /\.md$/);
 
-// docs.keys().forEach(component => {
 
-//   const componentEntity = docs(component).default;
 
-//   const name = `${component.split('/')[1].replace('.md', '')}`;
 
-//   pagesRouter.push({
 
-//     path: '/' + name,
 
-//     component: componentEntity,
 
-//     name
 
-//   });
 
-// });
 
-
 
-/** vite */
 
-const modulesDocs = import.meta.glob('/src/docs/*.md');
 
-for (const path in modulesDocs) {
 
-  let name = (/docs\/(.*).md/.exec(path) as any[])[1];
 
-  pagesRouter.push({
 
-    path: '/' + name,
 
-    component: modulesDocs[path],
 
-    name
 
-  });
 
-}
 
 const routes: Array<RouteRecordRaw> = [
 
   {
 
     path: '/',
 
     name: '/',
 
-    component: Main
 
-    // children: pagesRouter
 
-  },
 
-  {
 
-    path: '/index',
 
-    name: 'index',
 
     component: Index,
 
     children: pagesRouter
 
-  },
 
-  {
 
-    path: '/resource',
 
-    name: 'resource',
 
-    component: Resource
 
-  },
 
-  {
 
-    path: '/notice',
 
-    name: 'notice',
 
-    component: Notice
 
-  },
 
-  {
 
-    path: '/noticedetail',
 
-    name: 'noticedetail',
 
-    component: NoticeDetail
 
   }
 
 ];
 
 routes.push({
 
@@ -115,12 +56,5 @@ const router = createRouter({
 
 });
 
 router.afterEach((to, from) => {
 
   window.scrollTo(0, 0);
 
-  try {
 
-    setTimeout(() => {
 
-      new Image().src = `${config.baseUrl}/openapi/point?p=${encodeURIComponent(
 
-        JSON.stringify(location)
 
-      )}`;
 
-    }, 500);
 
-  } catch (error) {}
 
 });
 
 export default router;

+ 0 - 2
src/sites/doc/views/Index.vue
View File 

@@ -29,7 +29,6 @@ import { nav } from '@/config.json';
 
 import { onBeforeRouteUpdate, RouteLocationNormalized, useRoute, useRouter } from 'vue-router';
 
 import Header from '@/sites/doc/components/Header.vue';
 
 import Nav from '@/sites/doc/components/Nav.vue';
 
-import Footer from '@/sites/doc/components/Footer.vue';
 
 import DemoPreview from '@/sites/doc/components/DemoPreview.vue';
 
 import { RefData } from '@/sites/assets/util/ref';
 
 export default defineComponent({
 
@@ -37,7 +36,6 @@ export default defineComponent({
 
   components: {
 
     [Header.name]: Header,
 
     [Nav.name]: Nav,
 
-    [Footer.name]: Footer,
 
     [DemoPreview.name]: DemoPreview
 
   },
 
   setup() {

+ 0 - 848
src/sites/doc/views/Main.vue
View File 

@@ -1,848 +0,0 @@
 
-<template>
 
-  <doc-header></doc-header>
 
-  <div class="doc-content" :class="themeName()">
 
-    <div class="doc-content-index">
 
-      <div class="content-left">
 
-        <div class="content-title"> NutUI </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>
 
-          </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>
 
-    <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">遵循京东 App 10.0 设计规范</p>
 
-        </li>
 
-        <li class="features-item">
 
-          <img src="../../assets/images/img-home-features3.png" />
 
-          <p class="features-title">前沿技术</p>
 
-          <p class="features-desc">vue3 vite2.x typescript</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 轻松开发多端小程序</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+ 组件，覆盖多数业务场景</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>
 
-    <!-- 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 对 NutUI 每一个组件进行深度适配<br />
 
-            支持开发多端小程序
 
-          </p>
 
-        </div>
 
-      </div>
 
-    </div>
 
-
 
-    <!-- nutui-cat / nutui-营销 -->
 
-    <div class="doc-content-catmarketing">
 
-      <div class="doc-content-hd">
 
-        <h4 class="doc-content-title">业务组件</h4>
 
-      </div>
 
-      <div class="doc-content-catmarketing-content">
 
-        <div class="cat-content">
 
-          <div class="cat-content-left">
 
-            <img src="./../../assets/images/cat-back.png" alt="" />
 
-          </div>
 
-          <div class="cat-content-right">
 
-            <div class="cat-content-right-title">
 
-              <img src="./../../assets/images/cat-title.png" alt="" />
 
-            </div>
 
-            <p class="cat-content-right-desc">基于 NutUI 的大促组件</p>
 
-            <div class="cat-content-right-godetail" @click="toDetail">查看详情</div>
 
-          </div>
 
-        </div>
 
-        <div class="marketing-content">
 
-          <div class="marketing-content-left">
 
-            <img src="./../../assets/images/marketing-back.png" alt="" />
 
-          </div>
 
-          <div class="marketing-content-right">
 
-            <div class="marketing-content-right-title">
 
-              <img src="./../../assets/images/marketing-title.png" alt="" />
 
-            </div>
 
-            <p class="marketing-content-right-desc">基于 NutUI 的抽奖组件</p>
 
-            <div class="marketing-content-right-godetail" @click="goAwait">敬请期待</div>
 
-          </div>
 
-          <div class="marketing-content-mask" v-if="showAwait" @click="hideAwait"> 正在建设中，敬请期待~ </div>
 
-        </div>
 
-      </div>
 
-    </div>
 
-
 
-    <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"
 
-            :style="{
 
-              backgroundImage: 'url(' + currentCaseItem.cover_image + ')'
 
-            }"
 
-          >
 
-            <img src="../../assets/images/iphone-cases.png" alt="" srcset="" />
 
-          </div>
 
-          <div class="doc-content-cases-content__main-righticon" @click="onRight"></div>
 
-        </div>
 
-        <div class="doc-content-cases-content__list">
 
-          <div class="swiper-wrapper" :class="[themeNameValue() == 'black' ? 'noShadow' : '']">
 
-            <div class="swiper-slide" v-for="(item, index) in casesImages" :key="index">
 
-              <img :src="item.cover_image" />
 
-            </div>
 
-          </div>
 
-        </div>
 
-      </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>
 
-      </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" v-hover>{{ item.title }}</p>
 
-        </li>
 
-      </ul>
 
-    </div>
 
-  </div>
 
-  <doc-footer></doc-footer>
 
-</template>
 
-<script lang="ts">
 
-import { defineComponent, onMounted, reactive, toRefs, computed, ref } from 'vue';
 
-import Header from '@/sites/doc/components/Header.vue';
 
-import Footer from '@/sites/doc/components/Footer.vue';
 
-import router from '../router';
 
-import { RefData } from '@/sites/assets/util/ref';
 
-import { ApiService } from '@/sites/service/ApiService';
 
-import 'swiper/swiper.min.css';
 
-import Swiper from 'swiper/swiper-bundle.min.js';
 
-export default defineComponent({
 
-  name: 'main',
 
-  components: {
 
-    [Header.name]: Header,
 
-    [Footer.name]: Footer
 
-  },
 
-  setup() {
 
-    const data = reactive({
 
-      // theme: 'white',
 
-      articleList: new Array(),
 
-      casesImages: new Array(),
 
-      currentCaseItem: {},
 
-      currentCaseIndex: 0,
 
-      localTheme: localStorage.getItem('nutui-theme-color'),
 
-      showAwait: false
 
-    });
 
-    let caseSwiper: any = null;
 
-    onMounted(() => {
 
-      // 文章列表接口
 
-      const apiService = new ApiService();
 
-      apiService.getArticle().then((res) => {
 
-        if (res?.state == 0) {
 
-          data.articleList = (res.value.data.arrays as any[])
 
-            .map((item) => {
 
-              if (item.type == 1) {
 
-                return item;
 
-              }
 
-            })
 
-            .filter((i) => i);
 
-        }
 
-      });
 
-      apiService.getCases().then((res) => {
 
-        if (res?.state == 0) {
 
-          data.casesImages = (res.value.data.arrays as any[]).map((item) => {
 
-            if (item.cover_image?.length) {
 
-              item.cover_image = item.cover_image.split(',')[0];
 
-            }
 
-            return item;
 
-          });
 
-          if (data.casesImages?.length) {
 
-            data.currentCaseItem = data.casesImages[data.currentCaseIndex];
 
-          }
 
-
 
-          setTimeout(() => {
 
-            caseSwiper = new Swiper('.doc-content-cases-content__list', {
 
-              direction: 'horizontal',
 
-              slidesPerView: 'auto',
 
-              initialSlide: 1,
 
-              loop: true,
 
-              on: {
 
-                slideChange: function () {
 
-                  let realIndex = (this as any).realIndex;
 
-                  data.currentCaseIndex = realIndex === 0 ? data.casesImages.length - 1 : realIndex - 1;
 
-                  setTimeout(() => {
 
-                    data.currentCaseItem = data.casesImages[data.currentCaseIndex];
 
-                  }, 230);
 
-                }
 
-              }
 
-            });
 
-          }, 500);
 
-        }
 
-      });
 
-    });
 
-    const goAwait = () => {
 
-      data.showAwait = true;
 
-    };
 
-    const hideAwait = () => {
 
-      data.showAwait = false;
 
-    };
 
-    const onLeft = () => {
 
-      caseSwiper.slidePrev();
 
-    };
 
-
 
-    const onRight = () => {
 
-      caseSwiper.slideNext();
 
-    };
 
-
 
-    const themeName = computed(() => {
 
-      return function () {
 
-        return `doc-content-${RefData.getInstance().themeColor.value}`;
 
-      };
 
-    });
 
-    const themeNameValue = computed(() => {
 
-      return function () {
 
-        return RefData.getInstance().themeColor.value;
 
-      };
 
-    });
 
-    const toLink = (id: number) => {
 
-      window.open('//jelly.jd.com/article/' + id);
 
-    };
 
-    function toIntro() {
 
-      router.push({ path: '/intro' });
 
-    }
 
-    const toDetail = () => {
 
-      window.open('/cat');
 
-    };
 
-    return {
 
-      toIntro,
 
-      ...toRefs(data),
 
-      themeName,
 
-      themeNameValue,
 
-      toLink,
 
-      onLeft,
 
-      onRight,
 
-      toDetail,
 
-      goAwait,
 
-      hideAwait
 
-    };
 
-  }
 
-});
 
-</script>
 
-<style lang="scss">
 
-@keyframes fadeInLeft {
 
-  from {
 
-    opacity: 0;
 
-    transform: translate3d(-100%, 0, 0);
 
-  }
 
-  to {
 
-    opacity: 1;
 
-    transform: translate3d(0, 0, 0);
 
-  }
 
-}
 
-.doc-content-index {
 
-  .content-left {
 
-    background: url(https://storage.360buyimg.com/imgtools/a423faab46-8b142e80-8bb1-11eb-853a-6fded8704e77.png)
 
-      no-repeat;
 
-    background-size: 1126px 568px;
 
-    background-position-x: right;
 
-    background-position-y: 150px;
 
-    .content-title {
 
-      animation: fadeInLeft 1s both;
 
-    }
 
-    .content-smile {
 
-      animation: fadeInLeft 1s both 0.5s;
 
-    }
 
-    .content-subTitle {
 
-      animation: fadeInLeft 1s both 0.5s;
 
-    }
 
-    .content-button {
 
-      iframe {
 
-        animation: fadeInLeft 1s both 1.2s;
 
-      }
 
-      .leftButton {
 
-        animation: fadeInLeft 1s both 1.2s;
 
-      }
 
-      .rightButton {
 
-        animation: fadeInLeft 1s both 1.2s;
 
-      }
 
-    }
 
-  }
 
-}
 
-</style>
 
-<style lang="scss" scoped>
 
-.doc-content {
 
-  &-hd {
 
-    height: 52px;
 
-    line-height: 52px;
 
-    margin-bottom: 50px;
 
-    text-align: center;
 
-    position: relative;
 
-    .sub-more {
 
-      position: absolute;
 
-      right: 0;
 
-      font-size: 14px;
 
-      color: $theme-red;
 
-    }
 
-  }
 
-  &-title {
 
-    display: inline-block;
 
-    font-size: 26px;
 
-  }
 
-  &-features {
 
-    width: 1200px;
 
-    margin: 0 auto 90px;
 
-    .features-list {
 
-      display: flex;
 
-      justify-content: space-between;
 
-      margin-top: 50px;
 
-    }
 
-    .features-item {
 
-      width: 198px;
 
-      text-align: center;
 
-      img {
 
-        width: 100px;
 
-        height: 100px;
 
-        margin-bottom: 20px;
 
-      }
 
-    }
 
-    .features-title {
 
-      margin-bottom: 20px;
 
-      font-size: 24px;
 
-    }
 
-    .features-desc {
 
-      font-size: 14px;
 
-      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 {
 
-          padding-left: 25px;
 
-          color: #f2f2f2;
 
-          font-weight: lighter;
 
-          font-size: 18px;
 
-          line-height: 30px;
 
-        }
 
-      }
 
-    }
 
-  }
 
-  &-catmarketing {
 
-    width: 1200px;
 
-    margin: 0 auto 90px;
 
-
 
-    &-content {
 
-      display: flex;
 
-    }
 
-
 
-    .cat-content,
 
-    .marketing-content {
 
-      display: flex;
 
-      width: 585px;
 
-      height: 270px;
 
-      background: linear-gradient(
 
-        130.16deg,
 
-        rgba(249, 188, 203, 1) 0%,
 
-        rgba(247, 239, 247, 1) 26.666302447552447%,
 
-        rgba(241, 240, 246, 1) 66.69307255244755%,
 
-        rgba(180, 228, 228, 1) 100%
 
-      );
 
-      border-radius: 4px 4px 4px 0 4px;
 
-      margin-left: 44px;
 
-    }
 
-    .cat-content,
 
-    .marketing-content {
 
-      margin-left: 0px;
 
-      display: flex;
 
-      align-items: center;
 
-      &-left {
 
-        height: 182px;
 
-        width: 270px;
 
-        margin-left: 14px;
 
-        img {
 
-          height: 100%;
 
-          width: 100%;
 
-        }
 
-      }
 
-      &-right {
 
-        height: 182px;
 
-        width: 233px;
 
-        margin-left: 37px;
 
-        font-family: PingFangSC;
 
-        font-weight: normal;
 
-        padding-top: 11px;
 
-        box-sizing: border-box;
 
-        &-title {
 
-          img {
 
-            height: 46px;
 
-            width: 177px;
 
-          }
 
-        }
 
-        &-desc {
 
-          margin-top: 26px;
 
-          font-size: 18px;
 
-          color: rgba(51, 51, 51, 1);
 
-        }
 
-        &-godetail {
 
-          width: 130px;
 
-          height: 35px;
 
-          margin-top: 24px;
 
-          line-height: 35px;
 
-          text-align: center;
 
-          font-size: 19px;
 
-          cursor: pointer;
 
-          color: rgba(255, 255, 255, 1);
 
-          background: linear-gradient(
 
-            135deg,
 
-            rgba(255, 28, 101, 1) 0%,
 
-            rgba(255, 133, 202, 1) 67.83430752051981%,
 
-            rgba(255, 142, 155, 1) 87.35307751528254%,
 
-            rgba(255, 169, 151, 1) 100%
 
-          );
 
-          border-radius: 17px;
 
-        }
 
-      }
 
-    }
 
-    .marketing-content {
 
-      position: relative;
 
-      margin-left: 44px;
 
-      background: linear-gradient(
 
-        130.16deg,
 
-        rgba(219, 210, 255, 1) 0%,
 
-        rgba(247, 239, 247, 1) 26.666302447552447%,
 
-        rgba(241, 240, 246, 1) 66.69307255244755%,
 
-        rgba(255, 236, 203, 1) 100%
 
-      );
 
-      &-left {
 
-        height: 196px;
 
-        width: 243px;
 
-        margin-left: 28px;
 
-      }
 
-      &-right {
 
-        height: 196px;
 
-        padding-top: 20px;
 
-        &-godetail {
 
-          background: linear-gradient(
 
-            135deg,
 
-            rgba(114, 60, 255, 1) 0%,
 
-            rgba(111, 58, 255, 1) 63.49938195167575%,
 
-            rgba(150, 110, 255, 1) 87.35307751528254%,
 
-            rgba(149, 117, 241, 1) 100%
 
-          );
 
-        }
 
-      }
 
-      &-mask {
 
-        position: absolute;
 
-        top: 0px;
 
-        left: 0px;
 
-        height: 100%;
 
-        width: 100%;
 
-        background: rgba(0, 0, 0, 0.52);
 
-        border-radius: 4px 4px 4px 0 4px;
 
-        text-align: center;
 
-        line-height: 270px;
 
-        font-size: 30px;
 
-        color: #ffffff;
 
-      }
 
-    }
 
-  }
 
-  &-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: #959fb1;
 
-        border-radius: 29px 20px 20px 29px;
 
-        &-iphone {
 
-          width: 210px;
 
-          height: 420px;
 
-          background-repeat: no-repeat;
 
-          background-position: center center;
 
-          background-size: 188px 397px;
 
-          display: flex;
 
-          align-items: center;
 
-          justify-content: center;
 
-          overflow: hidden;
 
-          > img {
 
-            width: 100%;
 
-            height: 100%;
 
-          }
 
-        }
 
-        &-lefticon {
 
-          margin-right: 20px;
 
-          width: 36px;
 
-          height: 36px;
 
-          background-image: url('../../assets/images/right-arrow.png');
 
-          transform: rotate(180deg);
 
-          background-repeat: no-repeat;
 
-          background-size: 100% 100%;
 
-          cursor: pointer;
 
-          &:hover {
 
-            transform: rotate(0);
 
-            background-image: url('../../assets/images/left-arrow.png');
 
-          }
 
-        }
 
-        &-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;
 
-          &:hover {
 
-            transform: rotate(180deg);
 
-            background-image: url('../../assets/images/left-arrow.png');
 
-          }
 
-        }
 
-        &-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;
 
-        overflow: hidden;
 
-        margin-left: 30px;
 
-        .swiper-wrapper {
 
-          display: flex;
 
-          transform: translate3d(0, 0, 0);
 
-          transition: all 0.6s ease;
 
-          .swiper-slide {
 
-            width: 180px;
 
-            height: 390px;
 
-            flex-shrink: 0;
 
-            margin-right: 20px;
 
-            border-radius: 4px;
 
-            overflow: hidden;
 
-            > img {
 
-              width: 100%;
 
-              height: 100%;
 
-            }
 
-          }
 
-          &.noShadow {
 
-            .swiper-slide {
 
-              box-shadow: none !important;
 
-            }
 
-          }
 
-        }
 
-      }
 
-    }
 
-  }
 
-  &-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;
 
-        box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
 
-      }
 
-    }
 
-    .more-title {
 
-      width: 280px;
 
-      height: 44px;
 
-      line-height: 22px;
 
-      font-size: 14px;
 
-      overflow: hidden;
 
-      text-overflow: ellipsis;
 
-      -webkit-line-clamp: 2;
 
-      line-clamp: 2;
 
-      -webkit-box-orient: vertical;
 
-    }
 
-  }
 
-}
 
-.doc-content-index {
 
-  display: flex;
 
-  height: 926px;
 
-  margin-bottom: 70px;
 
-  background-color: #070505;
 
-  min-width: 1200px;
 
-  .content-left {
 
-    padding: 15% 0 0 8.8%;
 
-    // margin: auto 0;
 
-    flex: 1;
 
-    min-width: 550px;
 
-    .content-title {
 
-      // line-height: 36px;
 
-      font-size: 42px;
 
-      color: rgba(255, 255, 255, 1);
 
-    }
 
-    .content-smile {
 
-      margin-top: 10px;
 
-      width: 44px;
 
-      height: 17px;
 
-      background: url(https://storage.360buyimg.com/imgtools/09516173b9-9b32b9d0-3864-11eb-9a56-0104487ad2b0.png)
 
-        no-repeat;
 
-      background-size: cover;
 
-    }
 
-    .content-subTitle {
 
-      margin-top: 12px;
 
-      font-size: 20px;
 
-      color: rgba(255, 255, 255, 1);
 
-    }
 
-    .content-button {
 
-      position: relative;
 
-      display: flex;
 
-      margin-top: 40px;
 
-      iframe {
 
-        align-self: center;
 
-      }
 
-      .leftButton {
 
-        display: flex;
 
-        .leftButtonText {
 
-          align-self: center;
 
-          margin: auto;
 
-          font-size: 14px;
 
-          color: rgba(255, 255, 255, 1);
 
-        }
 
-        width: 150px;
 
-        height: 40px;
 
-        background: linear-gradient(
 
-          135deg,
 
-          rgba(250, 25, 44, 1) 0%,
 
-          rgba(250, 39, 40, 1) 45%,
 
-          rgba(250, 56, 31, 1) 83%,
 
-          rgba(250, 63, 25, 1) 100%
 
-        );
 
-        border-radius: 29px;
 
-        cursor: pointer;
 
-      }
 
-      .rightButton {
 
-        display: flex;
 
-        position: relative;
 
-        .rightButtonText {
 
-          align-self: center;
 
-          margin: auto;
 
-          font-size: 14px;
 
-          color: rgba(227, 44, 54, 1);
 
-        }
 
-        margin-left: 26px;
 
-        width: 150px;
 
-        height: 40px;
 
-        border: 1px solid rgba(250, 44, 25, 1);
 
-        border-radius: 29px;
 
-        background-color: #000000;
 
-        cursor: pointer;
 
-        &:hover {
 
-          .qrcodepart {
 
-            display: block;
 
-          }
 
-        }
 
-      }
 
-      .qrcodepart {
 
-        display: none;
 
-        position: absolute;
 
-        right: -10px;
 
-        top: 50px;
 
-        padding: 4px;
 
-        width: 166px;
 
-        border-radius: 6px;
 
-        background: rgba(255, 255, 255, 1);
 
-        box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.11);
 
-        .qrcode-text {
 
-          font-size: 14px;
 
-          color: rgba(51, 51, 51, 1);
 
-          text-align: center;
 
-        }
 
-        .qrcode {
 
-          width: 160px;
 
-          height: 160px;
 
-          margin: 0 auto;
 
-          background: url(https://img12.360buyimg.com/imagetools/jfs/t1/162421/39/13392/9425/6052ea60E592310a9/264bdff23ef5fe95.png)
 
-            no-repeat;
 
-          background-size: cover;
 
-        }
 
-      }
 
-    }
 
-  }
 
-}
 
-.doc-content-black {
 
-  background: $theme-black-content-bg;
 
-  color: white;
 
-  .doc-content-title {
 
-    color: white;
 
-  }
 
-  .doc-content-features {
 
-    .features-title {
 
-      color: white;
 
-    }
 
-    .features-desc {
 
-      color: #a5a5a5;
 
-    }
 
-  }
 
-  .doc-content-more {
 
-    .more-title {
 
-      color: #fff;
 
-    }
 
-  }
 
-  .doc-content-cases-content__main {
 
-    background: #474753;
 
-  }
 
-  .doc-content-more {
 
-    .more-item img {
 
-      box-shadow: none;
 
-    }
 
-  }
 
-}
 
-.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;
 
-    }
 
-  }
 
-  .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: center;
 
-}
 
-</style>

+ 0 - 182
src/sites/doc/views/Notice.vue
View File 

@@ -1,182 +0,0 @@
 
-<template>
 
-  <doc-header></doc-header>
 
-  <div class="notice">
 
-    <div class="notice-main">
 
-      <div class="notice-main-tab">
 
-        <div class="notice-main-tab-title">
 
-          <img class="notice-main-tab-title-img" src="../../assets/images/order.png" alt="" />
 
-          <div class="notice-main-tab-title-tip">站内消息</div>
 
-        </div>
 
-        <div v-for="(item, index) in tips" :key="index" class="notice-main-tab-panel">
 
-          {{ item.name }}
 
-        </div>
 
-      </div>
 
-      <div class="notice-main-content">
 
-        <div class="notice-main-title">常见问题</div>
 
-        <div class="notice-sub-title"
 
-          >以下为一些 NutUI 常见的问题和官方答复，在提问之前可以看下是否为类似的问题,可以直接点击链接查看文档</div
 
-        >
 
-        <div class="notice-main-line"></div>
 
-        <div v-for="(item, index) in list" :key="index" class="notice-main-item" @click="link(item)">
 
-          <div class="article-title">{{ item.title }} </div>
 
-          <div class="article-time">{{ item.update_time }}</div>
 
-        </div>
 
-      </div>
 
-    </div>
 
-  </div>
 
-  <!-- 设计资源 -->
 
-
 
-  <doc-footer></doc-footer>
 
-</template>
 
-<script lang="ts">
 
-import { defineComponent, onMounted, reactive, toRefs } from 'vue';
 
-import { onBeforeRouteUpdate, RouteLocationNormalized, useRoute, useRouter } from 'vue-router';
 
-import Header from '@/sites/doc/components/Header.vue';
 
-import { ApiService } from '@/sites/service/ApiService';
 
-import Footer from '@/sites/doc/components/Footer.vue';
 
-import { RefData } from '@/sites/assets/util/ref';
 
-export default defineComponent({
 
-  name: 'notice',
 
-  components: {
 
-    [Header.name]: Header,
 
-    [Footer.name]: Footer
 
-  },
 
-  setup() {
 
-    const data = reactive({
 
-      list: [],
 
-      tips: [{ name: 'FAQ' }]
 
-    });
 
-
 
-    const router = useRouter();
 
-    const watchDemoUrl = (router: RouteLocationNormalized) => {
 
-      RefData.getInstance().currentRoute.value = router.name as string;
 
-    };
 
-    const link = (item: any) => {
 
-      console.log(item);
 
-      window.open(item.link);
 
-      // router.push('/noticedetail');
 
-    };
 
-    // 文章列表接口
 
-    const getFaq = () => {
 
-      const apiService = new ApiService();
 
-      apiService.getFaq().then((res) => {
 
-        if (res?.state == 0) {
 
-          data.list = res.value.data.arrays;
 
-        }
 
-      });
 
-    };
 
-
 
-    onMounted(() => {
 
-      // 路由
 
-      const route = useRoute();
 
-      watchDemoUrl(route);
 
-      getFaq();
 
-    });
 
-    onBeforeRouteUpdate((to) => {
 
-      watchDemoUrl(to);
 
-    });
 
-    return {
 
-      ...toRefs(data),
 
-      link
 
-    };
 
-  }
 
-});
 
-</script>
 
-
 
-<style lang="scss" scoped>
 
-.notice {
 
-  background: #f7f8fa;
 
-  height: 100%;
 
-  .notice-main {
 
-    width: 1006px;
 
-    margin: 30px auto;
 
-    display: flex;
 
-    justify-content: space-between;
 
-    .notice-main-tab {
 
-      width: 296px;
 
-      height: 210px;
 
-      background: rgba(255, 255, 255, 1);
 
-      .notice-main-tab-title {
 
-        margin: 19px 0 14px 22px;
 
-        display: flex;
 
-        align-items: center;
 
-        .notice-main-tab-title-img {
 
-          width: 13px;
 
-          height: 14px;
 
-          margin-right: 8px;
 
-          display: block;
 
-        }
 
-      }
 
-      .notice-main-tab-panel {
 
-        padding: 14px 66px;
 
-        width: 296px;
 
-        height: 48px;
 
-        background: rgba(250, 36, 0, 0.06);
 
-        position: relative;
 
-        &:after {
 
-          content: '';
 
-          display: inline-block;
 
-          width: 10px;
 
-          height: 22px;
 
-          background: url('../../assets/images/item-rotate-active.png') no-repeat;
 
-          position: absolute;
 
-          left: 42px;
 
-        }
 
-      }
 
-    }
 
-    .notice-main-content {
 
-      width: 696px;
 
-      height: 747px;
 
-      background: rgba(255, 255, 255, 1);
 
-      padding: 16px 36px;
 
-      .notice-main-title {
 
-        line-height: 36px;
 
-        font-size: 16px;
 
-        font-family: PingFangSC;
 
-        font-weight: 500;
 
-        color: rgba(26, 26, 26, 1);
 
-      }
 
-      .notice-sub-title {
 
-        line-height: 1.4;
 
-        font-size: 15px;
 
-        margin-bottom: 10px;
 
-        font-family: PingFangSC;
 
-      }
 
-      .notice-main-line {
 
-        width: 644px;
 
-        height: 1px;
 
-        background: rgba(247, 248, 250, 1);
 
-        margin: 11px auto 0;
 
-      }
 
-      .notice-main-item {
 
-        padding-top: 18px;
 
-        height: 54px;
 
-        border-bottom: 1px solid rgba(247, 248, 250, 1);
 
-        &:hover {
 
-          .article-title,
 
-          .article-time {
 
-            color: rgba(250, 36, 0, 1);
 
-          }
 
-          cursor: pointer;
 
-        }
 
-        .article-title {
 
-          line-height: 20px;
 
-          font-size: 14px;
 
-          font-family: PingFangSC;
 
-          font-weight: normal;
 
-          color: rgba(26, 26, 26, 1);
 
-          float: left;
 
-        }
 
-        .article-time {
 
-          float: right;
 
-          line-height: 17px;
 
-          font-size: 12px;
 
-          font-family: PingFangSC;
 
-          font-weight: normal;
 
-          color: rgba(154, 155, 157, 1);
 
-        }
 
-      }
 
-    }
 
-  }
 
-}
 
-</style>

+ 0 - 105
src/sites/doc/views/NoticeDetail.vue
View File 

@@ -1,105 +0,0 @@
 
-<template>
 
-  <doc-header></doc-header>
 
-  <div class="notice-main">
 
-    <div class="notice-main-content"> </div>
 
-  </div>
 
-  <!-- 设计资源 -->
 
-
 
-  <doc-footer></doc-footer>
 
-</template>
 
-<script lang="ts">
 
-import { defineComponent, onMounted, reactive, toRefs } from 'vue';
 
-import {
 
-  onBeforeRouteUpdate,
 
-  RouteLocationNormalized,
 
-  useRoute,
 
-  useRouter
 
-} from 'vue-router';
 
-import Header from '@/sites/doc/components/Header.vue';
 
-import Footer from '@/sites/doc/components/Footer.vue';
 
-import { RefData } from '@/sites/assets/util/ref';
 
-export default defineComponent({
 
-  name: 'doc',
 
-  components: {
 
-    [Header.name]: Header,
 
-    [Footer.name]: Footer
 
-  },
 
-  setup() {
 
-    const data = reactive({
 
-      list: [
 
-        { name: '123', id: '12' },
 
-        { name: '123', id: '12' },
 
-        { name: '123', id: '12' }
 
-      ]
 
-    });
 
-
 
-    const router = useRouter();
 
-    const watchDemoUrl = (router: RouteLocationNormalized) => {
 
-      RefData.getInstance().currentRoute.value = router.name as string;
 
-    };
 
-    const link = () => {
 
-      router.push('/noticedetail');
 
-    };
 
-    onMounted(() => {
 
-      // 路由
 
-      const route = useRoute();
 
-      watchDemoUrl(route);
 
-    });
 
-    onBeforeRouteUpdate((to) => {
 
-      watchDemoUrl(to);
 
-    });
 
-    return {
 
-      ...toRefs(data),
 
-      link
 
-    };
 
-  }
 
-});
 
-</script>
 
-
 
-<style lang="scss" scoped>
 
-.notice-main {
 
-  background: #f7f8fa;
 
-  .notice-main-content {
 
-    width: 696px;
 
-    height: 747px;
 
-    background: rgba(255, 255, 255, 1);
 
-    margin: 30px auto;
 
-    padding: 16px 36px;
 
-    .notice-main-title {
 
-      line-height: 36px;
 
-      font-size: 16px;
 
-      font-family: PingFangSC;
 
-      font-weight: 500;
 
-      color: rgba(26, 26, 26, 1);
 
-    }
 
-    .notice-main-line {
 
-      width: 644px;
 
-      height: 1px;
 
-      background: rgba(247, 248, 250, 1);
 
-      margin: 11px auto 0;
 
-      margin-bottom: 15px;
 
-    }
 
-    .notice-main-item {
 
-      padding-top: 18px;
 
-      height: 54px;
 
-      border-bottom: 1px solid rgba(247, 248, 250, 1);
 
-      .article-title {
 
-        line-height: 20px;
 
-        font-size: 14px;
 
-        font-family: PingFangSC;
 
-        font-weight: normal;
 
-        color: rgba(26, 26, 26, 1);
 
-        float: left;
 
-      }
 
-      .article-time {
 
-        float: right;
 
-        line-height: 17px;
 
-        font-size: 12px;
 
-        font-family: PingFangSC;
 
-        font-weight: normal;
 
-        color: rgba(154, 155, 157, 1);
 
-      }
 
-    }
 
-  }
 
-}
 
-</style>

+ 0 - 298
src/sites/doc/views/Resource.vue
View File 

@@ -1,298 +0,0 @@
 
-<template>
 
-  <doc-header></doc-header>
 
-  <div class="resource-main">
 
-    <div class="resource-main-content">
 
-      <h3 class="sub-title">资源</h3>
 
-      <p class="sub-desc"
 
-        >想要了解 NutUI 设计体系背后的故事？如何才能更好的应用？你可以查阅下述我们为你精挑细选的文章。也欢迎关注 NutUI
 
-        官方专栏，这里常有关于 NutUI 设计体系下相关话题内容的最新分享和讨论。</p
 
-      >
 
-    </div>
 
-  </div>
 
-  <!-- 设计资源 -->
 
-  <div class="resource-content">
 
-    <div class="resource-block">
 
-      <h4 class="sub-title">设计资源</h4>
 
-      <!-- <h4 class="sub-title">学习资料</h4> -->
 
-      <p class="sub-desc"
 
-        >NutUI 3x 基于 JD APP 10.0 视觉规范实现的组件库，在这里可以下载 NutUI 的设计资源。
 
-        <a class="download" download href="https://storage.360buyimg.com/nutui-static/NutUI3xStyleGuide.sketch"
 
-          >点击下载
 
-        </a>
 
-      </p>
 
-      <!-- <img
 
-        src="https://img11.360buyimg.com/imagetools/jfs/t1/206767/18/7920/405226/6181e655E6b5be4de/47a13df50b92106b.jpg"
 
-      /> -->
 
-    </div>
 
-    <div class="resource-block">
 
-      <div class="no-data" v-if="articleList.length === 0">
 
-        <img class="nodata-img-joy" src="../../assets/images/img-joy.png" />
 
-        <p class="nodata-desc">敬请期待</p>
 
-      </div>
 
-      <div class="tab-box" v-else>
 
-        <h4 class="sub-title">全部文章</h4>
 
-        <template v-for="pItem in articleList" v-show="activeIndex === 0">
 
-          <h3>{{ pItem.year }}</h3>
 
-          <div class="tab-bd">
 
-            <div class="design-item" v-for="item in pItem.list" :key="item.id" @click="toLink(item.id)">
 
-              <img class="img-design" :src="item.cover_image" />
 
-              <p class="design-title" v-hover>{{ item.title }}</p>
 
-            </div>
 
-          </div>
 
-        </template>
 
-      </div>
 
-    </div>
 
-    <!-- 社区文章 -->
 
-    <div class="resource-block">
 
-      <h4 class="sub-title">社区文章</h4>
 
-      <p class="sub-desc"></p>
 
-      <ul class="article-box">
 
-        <li class="article-item" v-for="item in communityArticleList" :key="item.id">
 
-          <a class="article-link" target="_blank" :href="item.link"> {{ item.title }} - {{ item.user_name }} </a>
 
-        </li>
 
-      </ul>
 
-    </div>
 
-  </div>
 
-  <doc-footer></doc-footer>
 
-</template>
 
-<script lang="ts">
 
-import { defineComponent, onMounted, reactive, toRefs } from 'vue';
 
-import { onBeforeRouteUpdate, RouteLocationNormalized, useRoute } from 'vue-router';
 
-import Header from '@/sites/doc/components/Header.vue';
 
-import Footer from '@/sites/doc/components/Footer.vue';
 
-import { RefData } from '@/sites/assets/util/ref';
 
-import { ApiService } from '@/sites/service/ApiService';
 
-export default defineComponent({
 
-  name: 'doc',
 
-  components: {
 
-    [Header.name]: Header,
 
-    [Footer.name]: Footer
 
-  },
 
-  setup() {
 
-    const articleList: any[] = [];
 
-    const communityArticleList: any[] = [];
 
-    const data = reactive({
 
-      articleList,
 
-      communityArticleList,
 
-      tabData: [
 
-        {
 
-          title: '全部文章'
 
-        }
 
-        // {
 
-        //   title: '性能体验'
 
-        // },
 
-        // {
 
-        //   title: '性能体验'
 
-        // }
 
-      ],
 
-      activeIndex: 0,
 
-      showNutuiCat: false
 
-    });
 
-    const watchDemoUrl = (router: RouteLocationNormalized) => {
 
-      RefData.getInstance().currentRoute.value = router.name as string;
 
-    };
 
-    onMounted(() => {
 
-      // 路由
 
-      const route = useRoute();
 
-      watchDemoUrl(route);
 
-
 
-      // 文章列表接口
 
-      const apiService = new ApiService();
 
-      apiService.getArticle().then((res) => {
 
-        if (res?.state == 0) {
 
-          (res.value.data.arrays as any[]).forEach((element) => {
 
-            if (element.type == 1) {
 
-              let year = element.create_time.split('-')[0];
 
-              let index = data.articleList.findIndex((item) => item.year == year);
 
-              if (index == -1) {
 
-                data.articleList.push({
 
-                  year,
 
-                  list: [element]
 
-                });
 
-              } else {
 
-                data.articleList[index].list.push(element);
 
-              }
 
-            } else {
 
-              data.communityArticleList.push(element);
 
-            }
 
-          });
 
-        }
 
-      });
 
-    });
 
-    onBeforeRouteUpdate((to) => {
 
-      watchDemoUrl(to);
 
-    });
 
-    const clickTab = (index: number) => {
 
-      data.activeIndex = index;
 
-    };
 
-    const toLink = (id: number) => {
 
-      window.open('//jelly.jd.com/article/' + id);
 
-    };
 
-    return {
 
-      ...toRefs(data),
 
-      clickTab,
 
-      toLink
 
-    };
 
-  }
 
-});
 
-</script>
 
-
 
-<style lang="scss" scoped>
 
-$mainRed: #fa685d;
 
-.resource {
 
-  &-main {
 
-    background-color: #1d1d1d;
 
-    &-content {
 
-      max-width: 1200px;
 
-      margin: 0 auto;
 
-      padding-top: 48px;
 
-      padding-bottom: 53px;
 
-      background: url('../../assets/images/bg-article.png') no-repeat;
 
-      background-size: 307px 200px;
 
-      background-position: right 280px top 0;
 
-      .sub-title {
 
-        margin-left: 8px;
 
-        margin-bottom: 40px;
 
-        line-height: 36px;
 
-        font-size: 30px;
 
-        color: $white;
 
-      }
 
-      .sub-desc {
 
-        line-height: 22px;
 
-        font-size: 16px;
 
-        color: $white;
 
-      }
 
-    }
 
-  }
 
-  &-content {
 
-    max-width: 1200px;
 
-    margin: 0 auto;
 
-    padding: 50px 0;
 
-  }
 
-  &-block {
 
-    margin-bottom: 50px;
 
-    text-align: left;
 
-    .download {
 
-      color: #38f;
 
-    }
 
-    > img {
 
-      width: 100%;
 
-      box-shadow: 0px 1px 7px 0px rgba(237, 238, 241, 1);
 
-    }
 
-    .sub-title {
 
-      margin-bottom: 15px;
 
-      line-height: 42px;
 
-      font-size: 30px;
 
-      color: #1a1a1a;
 
-    }
 
-    .sub-desc {
 
-      margin-bottom: 40px;
 
-      line-height: 22px;
 
-      font-size: 16px;
 
-      color: #959fb1;
 
-    }
 
-    .sub-red {
 
-      color: #fa2c19;
 
-    }
 
-  }
 
-}
 
-.no-data {
 
-  text-align: center;
 
-  .nodata-img-joy {
 
-    width: 269px;
 
-    height: 153px;
 
-    margin-bottom: 30px;
 
-  }
 
-  .nodata-desc {
 
-    font-size: 16px;
 
-    color: #959fb1;
 
-  }
 
-}
 
-.tab {
 
-  &-box {
 
-    > h3 {
 
-      margin-bottom: 10px;
 
-    }
 
-  }
 
-  &-hd {
 
-    display: flex;
 
-    margin-bottom: 30px;
 
-  }
 
-  &-bd {
 
-    display: flex;
 
-    width: 100%;
 
-    flex-wrap: wrap;
 
-    justify-content: flex-start;
 
-  }
 
-  &-hd-item {
 
-    margin-right: 40px;
 
-    line-height: 25px;
 
-    font-size: 18px;
 
-    color: #808080;
 
-    cursor: pointer;
 
-    &:first-child {
 
-      color: #1a1a1a;
 
-    }
 
-    &.active {
 
-      color: #e32c36;
 
-    }
 
-  }
 
-}
 
-.design {
 
-  &-item {
 
-    width: 280px;
 
-    margin-right: 26px;
 
-    margin-bottom: 45px;
 
-    cursor: pointer;
 
-    &:nth-child(4n) {
 
-      margin-right: 0;
 
-    }
 
-    .img-design {
 
-      width: 280px;
 
-      height: 170px;
 
-      margin-bottom: 20px;
 
-      border-radius: 5px;
 
-    }
 
-  }
 
-  &-title {
 
-    width: 280px;
 
-    height: 44px;
 
-    line-height: 22px;
 
-    font-size: 16px;
 
-    color: #1d1d21;
 
-    text-overflow: -o-ellipsis-lastline;
 
-    overflow: hidden;
 
-    text-overflow: ellipsis;
 
-    display: -webkit-box;
 
-    -webkit-line-clamp: 2;
 
-    line-clamp: 2;
 
-    -webkit-box-orient: vertical;
 
-  }
 
-}
 
-.article {
 
-  &-item {
 
-    position: relative;
 
-    padding-left: 34px;
 
-    margin-bottom: 20px;
 
-    color: $mainRed;
 
-    &:before {
 
-      content: '';
 
-      display: inline-block;
 
-      position: absolute;
 
-      top: 50%;
 
-      left: 0;
 
-      margin-top: -8px;
 
-      width: 12px;
 
-      height: 12px;
 
-      border: 2px solid #fa2c19;
 
-      border-radius: 50%;
 
-    }
 
-  }
 
-  &-link {
 
-    line-height: 22px;
 
-    font-size: 14px;
 
-    color: $mainRed;
 
-    cursor: pointer;
 
-  }
 
-}
 
-</style>

+ 0 - 1
src/sites/mobile-react/README.md
View File 

@@ -1 +0,0 @@
 
-# mobile-react-runtime

+ 4 - 5
src/sites/mobile/components/Index.vue
View File 

@@ -14,8 +14,8 @@
 
           <template v-for="_package in _nav.packages" :key="_package">
 
             <li v-if="_package.show">
 
               <router-link :to="_package.name.toLowerCase()"
 
-                >{{ _package.name }}&nbsp;&nbsp;{{ _package.cName }}</router-link
 
-              >
 
+                >{{ _package.name }}&nbsp;&nbsp;{{ _package.cName }}
 
+              </router-link>
 
               <nut-icon size="14px" color="#979797" name="right"></nut-icon>
 
             </li>
 
           </template>
 
@@ -27,13 +27,12 @@
 
 
 <script lang="ts">
 
 import { defineComponent, reactive } from 'vue';
 
-import { nav, versions } from '@/config.json';
 
+import { nav } from '@/config.json';
 
 export default defineComponent({
 
   name: 'doc',
 
   setup() {
 
     return reactive({
 
-      nav,
 
-      versions
 
+      nav
 
     });
 
   }
 
 });

+ 0 - 44
src/sites/service/ApiService.ts
View File 

@@ -1,44 +0,0 @@
 
-import { HttpClient } from './HttpClient';
 
-export class ApiService {
 
-  private httpClient: HttpClient;
 
-
 
-  constructor() {
 
-    this.httpClient = new HttpClient();
 
-  }
 
-  /**
 
-   * 获取nutui文章
 
-   * @returns
 
-   * @memberof ArticleApiService
 
-   */
 
-  getArticle() {
 
-    return this.httpClient.request(
 
-      '/openapi/article?pageIndex=1&pageSize=100',
 
-      'get',
 
-      {}
 
-    );
 
-  }
 
-  /**
 
-   * 获取nutui使用案例
 
-   * @returns
 
-   * @memberof ArticleApiService
 
-   */
 
-  getCases() {
 
-    return this.httpClient.request(
 
-      '/openapi/cases?pageIndex=1&pageSize=100',
 
-      'get',
 
-      {}
 
-    );
 
-  }
 
-  /**
 
-   * 获取nutui常见问题
 
-   * @returns
 
-   * @memberof FaqApiService
 
-   */
 
-  getFaq() {
 
-    return this.httpClient.request(
 
-      '/openapi/faq?pageIndex=1&pageSize=100',
 
-      'get',
 
-      {}
 
-    );
 
-  }
 
-}

+ 0 - 68
src/sites/service/HttpClient.ts
View File 

@@ -1,68 +0,0 @@
 
-import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
 
-import config from '../config/env';
 
-
 
-export class HttpClient {
 
-  private checkStatus(response: AxiosResponse<any>): ResponseData {
 
-    const resData: ResponseData = {
 
-      state: 0,
 
-      value: {},
 
-      message: ''
 
-    };
 
-    // 如果http状态码正常，则直接返回数据
 
-    if (
 
-      response &&
 
-      (response.status === 200 ||
 
-        response.status === 304 ||
 
-        response.status === 400)
 
-    ) {
 
-      // 如果不需要除了data之外的数据，可以直接 return response.data
 
-      resData.value = response.data;
 
-    }
 
-    return resData;
 
-  }
 
-  /**
 
-   * request请求
 
-   * @param {string} url url
 
-   * @param {string} method get|post
 
-   * @param {*} [params] 请求参数
 
-   */
 
-  public async request(
 
-    url: string,
 
-    method: string,
 
-    params: any
 
-  ): Promise<ResponseData | null> {
 
-    const defaultHeaders = {
 
-      'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
 
-    };
 
-    const headers = Object.assign(defaultHeaders, params.header);
 
-    try {
 
-      const options = {
 
-        method,
 
-        url: config.baseUrl + url,
 
-        data: params,
 
-        params: params,
 
-        timeout: 1000 * 30,
 
-        crossDomain: true,
 
-        headers
 
-      };
 
-
 
-      const res = await axios(options as AxiosRequestConfig);
 
-      return this.checkStatus(res);
 
-    } catch (error) {
 
-      console.error(error);
 
-      return null;
 
-    }
 
-  }
 
-}
 
-
 
-/**
 
- * 响应对象
 
- * @param {number} state 0 成功 1失败
 
- * @param {any} value 接口响应数据
 
- * @param {string} message 服务器响应信息msg
 
- */
 
-export interface ResponseData {
 
-  state: number;
 
-  value?: any;
 
-  message: string;
 
-}

+ 5 - 5
vite.config.ts
View File 

@@ -65,17 +65,17 @@ export default defineConfig({
 
   build: {
 
     target: 'es2015',
 
     outDir: './dist/3x/',
 
-    assetsDir: config.version,
 
+    // assetsDir: config.version,
 
     cssCodeSplit: true,
 
     rollupOptions: {
 
       input: {
 
-        doc: resolve(__dirname, 'index.html'),
 
+        // doc: resolve(__dirname, 'index.html'),
 
         mobile: resolve(__dirname, 'demo.html')
 
       },
 
       output: {
 
-        entryFileNames: `${config.version}/[name].js`,
 
-        chunkFileNames: `${config.version}/[name].js`,
 
-        assetFileNames: `${config.version}/[name].[ext]`
 
+        entryFileNames: `demo-${config.version}/[name].js`,
 
+        chunkFileNames: `demo-${config.version}/[name].js`,
 
+        assetFileNames: `demo-${config.version}/[name].[ext]`
 
       }
 
     }
 
   }