Browse Source

feat: design sketch file

richard1015 4 years ago
parent
commit
c380ac5258
1 changed files with 31 additions and 14 deletions
  1. 31 14
      src/sites/doc/views/Resource.vue

+ 31 - 14
src/sites/doc/views/Resource.vue

@@ -3,30 +3,38 @@
   <div class="resource-main">
     <div class="resource-main-content">
       <h3 class="sub-title">资源</h3>
-      <p class="sub-desc">这里汇总了 NutUI 相关的所有的资源</p>
-    </div>
-  </div>
-  <!-- 设计资源 -->
-  <div class="resource-content">
-    <div class="resource-block" v-if="articleList.length === 0">
-      <h4 class="sub-title">设计资源</h4>
       <p class="sub-desc"
-        >这里提供 NUTUI 相关设计资源和设计工具的下载,更多设计资源正在整理和完善中。你可以在这个<span class="sub-red"
+        >这里提供 NutUI 相关设计资源和设计工具的下载,更多设计资源正在整理和完善中。你可以在这个<span class="sub-red"
           >地址</span
         >中反馈对新版本 Sketch Symbols 组件的意见。</p
       >
-      <div class="no-data">
-        <img class="nodata-img-joy" src="../../assets/images/img-joy.png" />
-        <p class="nodata-desc">敬请期待</p>
-      </div>
     </div>
-    <div class="resource-block" v-else>
+  </div>
+  <!-- 设计资源 -->
+  <div class="resource-content">
+    <div class="resource-block">
       <h4 class="sub-title">设计资源</h4>
+
+      <a class="download" download href="https://storage.360buyimg.com/nutui-static/NutUI3xStyleGuide.sketch"
+        >点击下载
+      </a>
+
+      <img
+        style="margin-top: 20px; width: 90%"
+        src="https://img13.360buyimg.com/imagetools/jfs/t1/217516/19/2297/1091750/617b97caEf8b14bd3/11fe4befd5d685cc.jpg"
+      />
+    </div>
+    <div class="resource-block">
       <p class="sub-desc"
         >想要了解 NutUI 设计体系背后的故事?如何才能更好的应用?你可以查阅下述我们为你精挑细选的文章。也欢迎关注 NutUI
         官方专栏,这里常有关于 NutUI 设计体系下相关话题内容的最新分享和讨论。</p
       >
-      <div class="tab-box">
+
+      <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>
         <div class="tab-hd">
           <div
             class="tab-hd-item"
@@ -179,6 +187,15 @@ $mainRed: #fa685d;
   &-block {
     margin-bottom: 50px;
     text-align: left;
+    .download {
+      display: block;
+      width: 100px;
+      color: #fff;
+      line-height: 40px;
+      text-align: center;
+      background-color: #38f;
+      border-radius: 3px;
+    }
     .sub-title {
       margin-bottom: 15px;
       line-height: 42px;