浏览代码

docs: site font modify

richard1015 4 年之前
父节点
当前提交
1c916d9ec1

+ 4 - 9
src/sites/doc/components/Footer.vue

@@ -15,8 +15,8 @@
           ></div
         >
         <div class="doc-footer-item"
-          ><a class="sub-link" target="_blank" href="https://taro-ui.jd.com"
-            >Taro UI</a
+          ><a class="sub-link" target="_blank" href="https://taro.jd.com"
+            >Taro</a
           ></div
         >
         <div class="doc-footer-item"
@@ -48,7 +48,7 @@
             class="sub-link"
             target="_blank"
             href="https://www.zhihu.com/column/c_1263837684834889728"
-            >NUT UI 知乎专栏</a
+            >NutUI 知乎专栏</a
           ></div
         >
         <div class="doc-footer-item vx-item">
@@ -65,12 +65,7 @@
       <div class="doc-footer-list">
         <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
+          ><a class="sub-link" target="_blank" href="#/joinus">加入我们</a></div
         >
         <div class="doc-footer-item"
           ><a class="sub-link" target="_blank" href="http://fe.jd.com"

+ 8 - 27
src/sites/doc/views/Main.vue

@@ -5,7 +5,9 @@
       <div class="content-left">
         <div class="content-title"> NutUI 3.0 </div>
         <div class="content-smile"> </div>
-        <div class="content-subTitle">一款具有京东风格的VUE组件</div>
+        <div class="content-subTitle"
+          >一套京东风格的轻量级移动端 Vue 组件库</div
+        >
         <div class="content-button">
           <div class="leftButton" @click="toIntro">
             <div class="leftButtonText">开始使用</div>
@@ -28,28 +30,6 @@
             title="GitHub"
           ></iframe>
         </div>
-        <!-- <div style="display: flex; align-items: center">
-          <a href="#" class="leftButton">开始使用</a>
-          <a href="javascript:;" class="rightButton ">
-            扫码体验
-            <a>
-              <span>请使用手机扫码体验</span>
-              <img
-                src="https://img12.360buyimg.com/imagetools/jfs/t1/124892/31/7144/6065/5f0d9fe4Ef020d678/cae78d015aa5897c.png"
-                alt
-              />
-            </a>
-          </a>
-          <iframe
-            style="margin-left: 20px"
-            src="https://ghbtns.com/github-btn.html?user=jdf2e&repo=nutui&type=star&count=true&size=large"
-            frameborder="0"
-            scrolling="0"
-            width="170"
-            height="30"
-            title="GitHub"
-          ></iframe>
-        </div> -->
       </div>
       <div class="content-right">
         <div class="content-img"> </div>
@@ -63,19 +43,20 @@
         <li class="features-item">
           <img src="../../assets/images/img-home-features1.png" />
           <p class="features-title">京东风格</p>
-          <p class="features-desc">遵循京东App9.0设计规范</p>
+          <p class="features-desc">遵循京东 App 9.0 设计规范</p>
         </li>
         <li class="features-item">
           <img src="../../assets/images/img-home-features2.png" />
           <p class="features-title">组件丰富</p>
           <p class="features-desc a-l"
-            >提供70+组件,丰富的demo快速体验交互细节,覆盖各类场景满足各种功能的需求</p
+            >提供 70+ 组件,丰富的 demo
+            快速体验交互细节,覆盖各类场景满足各种功能的需求</p
           >
         </li>
         <li class="features-item">
           <img src="../../assets/images/img-home-features3.png" />
           <p class="features-title">前沿技术</p>
-          <p class="features-desc">Vue3.X vite2.X typescript</p>
+          <p class="features-desc">vue3 vite2.x typescript</p>
         </li>
         <li class="features-item">
           <img src="../../assets/images/img-home-features4.png" />
@@ -164,7 +145,7 @@ export default defineComponent({
 });
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 @keyframes fadeInLeft {
   from {
     opacity: 0;

+ 24 - 0
src/styles/animation/drop.scss

@@ -0,0 +1,24 @@
+@keyframes nutDropIn {
+  0% {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+@keyframes nutDropOut {
+  0% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scaleY(0.8);
+  }
+}
+
+// select、dropdown
+@include make-animation(nutDrop);

+ 6 - 0
src/styles/animation/index.scss

@@ -0,0 +1,6 @@
+// Animation
+@import 'fade.scss';
+@import 'zoom.scss';
+@import 'ease.scss';
+@import 'drop.scss';
+@import 'rotate.scss';

+ 10 - 0
src/styles/animation/rotate.scss

@@ -0,0 +1,10 @@
+@keyframes rotation {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@include make-animation(nutRotate);

+ 26 - 0
src/styles/animation/zoom.scss

@@ -0,0 +1,26 @@
+@keyframes nutZoomIn {
+  from {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes nutZoomOut {
+  from {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0;
+    transform: scale3d(0.3, 0.3, 0.3);
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+@include make-animation(nutZoom);

+ 2 - 0
src/styles/mixins/index.scss

@@ -0,0 +1,2 @@
+@import 'make-animation.scss';
+@import 'text-ellipsis.scss';

+ 3 - 0
src/styles/variables.scss

@@ -222,3 +222,6 @@ $infinite-bottom-color: #c8c8c8;
 view-block {
   display: block;
 }
+
+@import './mixins/index';
+@import './animation/index';