fix: footer增加二维码

src/sites/assets/styles/variables.scss

@@ -18,14 +18,20 @@ $theme-red-actice: #fff;
 $theme-red-select-border: #f0f2f5;
 $theme-red-select-word: #666;
 $theme-red-select-bg: #fff;
-$theme-red-header-bg: url('../../assets/images/header-bg.png') no-repeat;
+$theme-red-header-bg: url('../../assets/images/header-bg.png');
 $theme-red-footer-word1: #1a1a1a;
 $theme-red-footer-word2: #666;
 $theme-red-footer-word3: #1d1d21;
 $theme-red-footer-word4: #808080;
 $theme-red-footer-bg: #fff;
 $theme-red-footer-border: #eaf0fb;
-$theme-red-gradient: linear-gradient(135deg, rgba(250, 44, 25, 1) 0%, rgba(250, 63, 25, 1) 45%, rgba(250, 89, 25, 1) 83%, rgba(250, 100, 25, 1) 100%);
+$theme-red-gradient: linear-gradient(
+  135deg,
+  rgba(250, 44, 25, 1) 0%,
+  rgba(250, 63, 25, 1) 45%,
+  rgba(250, 89, 25, 1) 83%,
+  rgba(250, 100, 25, 1) 100%
+);
 // 白色
 $theme-white: #fff;
 $theme-white-word: #1a1a1a;
@@ -92,7 +98,8 @@ $nutui-doc-light-grey: #ccc;
 $nutui-doc-border-color: #f1f4f8;
 $nutui-doc-code-color: #58727e;
 $nutui-doc-code-background-color: #f1f4f8;
-$nutui-doc-code-font-family: 'Source Code Pro', 'Monaco', 'Inconsolata', monospace;
+$nutui-doc-code-font-family: 'Source Code Pro', 'Monaco', 'Inconsolata',
+  monospace;
 $nutui-doc-padding: 24px;
 $nutui-doc-row-max-width: 1680px;
 $nutui-doc-nav-width: 220px;

src/sites/doc/components/Footer.vue

@@ -2,26 +2,88 @@
   <div class="doc-footer" :class="`doc-footer-${data.theme}`">
     <div class="doc-footer-content">
       <div class="doc-footer-list">
-        <h4 class="doc-footer-title">相关资源</h4>
-        <div class="doc-footer-item">JDW智能构建平台</div>
-        <div class="doc-footer-item">JDW智能构建平台</div>
-        <div class="doc-footer-item">JDW智能构建平台</div>
-        <div class="doc-footer-item">JDW智能构建平台</div>
+        <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">JDW智能构建平台</div>
-        <div class="doc-footer-item">JDW智能构建平台</div>
+        <div class="doc-footer-item"
+          ><a class="sub-link" target="_blank" href="https://ling.jd.com/jdw"
+            >羚珑-中后台智能构建平台</a
+          ></div
+        >
+        <div class="doc-footer-item"
+          ><a class="sub-link" target="_blank" href="https://taro-ui.jd.com"
+            >Taro UI</a
+          ></div
+        >
+        <div class="doc-footer-item"
+          ><a class="sub-link" target="_blank" href="https://vitejs.dev"
+            >Vite</a
+          ></div
+        >
+        <div class="doc-footer-item"
+          ><a
+            class="sub-link"
+            target="_blank"
+            href="hhttps://cn.vuejs.org/index.html"
+            >Vue</a
+          ></div
+        >
       </div>
       <div class="doc-footer-list">
-        <h4 class="doc-footer-title">相关资源</h4>
-        <div class="doc-footer-item">JDW智能构建平台</div>
-        <div class="doc-footer-item">JDW智能构建平台</div>
+        <h4 class="doc-footer-title">社区</h4>
+        <div class="doc-footer-item"
+          ><a
+            class="sub-link"
+            target="_blank"
+            href="https://github.com/jdf2e/nutui"
+            >Github</a
+          ></div
+        >
+        <div class="doc-footer-item"
+          ><a
+            class="sub-link"
+            target="_blank"
+            href="https://www.zhihu.com/column/c_1263837684834889728"
+            >NUT UI 知乎专栏</a
+          ></div
+        >
+        <div class="doc-footer-item vx-item">
+          微信
+          <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-code.png" />
+            <p class="vx-desc"
+              >回复<span class="vx-red">NUT UI</span>即刻进群</p
+            >
+          </div>
+        </div>
       </div>
       <div class="doc-footer-list">
-        <h4 class="doc-footer-title">相关资源</h4>
-        <div class="doc-footer-item">JDW智能构建平台</div>
-        <div class="doc-footer-item">JDW智能构建平台</div>
+        <h4 class="doc-footer-title">关于我们</h4>
+        <div class="doc-footer-item"
+          ><a
+            class="sub-link"
+            target="_blank"
+            href="https://nutui.jd.com/#/joinus"
+            >加入我们</a
+          ></div
+        >
+        <div class="doc-footer-item"
+          ><a class="sub-link" target="_blank" href="http://fe.jd.com"
+            >京东零售前端</a
+          ></div
+        >
+        <div class="doc-footer-item"
+          ><a class="sub-link" target="_blank" href="nutui@jd.com"
+            >联系我们</a
+          ></div
+        >
       </div>
       <div
         class="doc-footer-list"
@@ -111,16 +173,28 @@ export default defineComponent({
     }
     &-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 {
       margin-top: 30px;
@@ -188,6 +262,9 @@ export default defineComponent({
       }
       &-item {
         color: $theme-black-footer-word2;
+        .sub-link {
+          color: $theme-black-footer-word2;
+        }
       }
       &-desc {
         color: $theme-black-footer-word4;
@@ -244,6 +321,9 @@ export default defineComponent({
       }
       &-item {
         color: $theme-white-footer-word2;
+        .sub-link {
+          color: $theme-white-footer-word2;
+        }
       }
       &-desc {
         color: $theme-white-footer-word4;
@@ -296,4 +376,51 @@ export default defineComponent({
     }
   }
 }
+.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: -120px;
+  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-family: PingFangSC-Regular;
+    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>

src/sites/doc/components/Header.vue

@@ -148,6 +148,7 @@ export default defineComponent({
     min-width: 1300px;
     background-size: cover;
     background-position: center;
+    background-repeat: no-repeat;
     height: $doc-header-height;
     line-height: $doc-header-height;
     text-align: left;
@@ -282,7 +283,7 @@ export default defineComponent({
 .doc-header {
   // 红色
   &-red {
-    background: $theme-red-header-bg;
+    background-image: $theme-red-header-bg;
     color: $theme-red-word;
     .header {
       &-logo {