udxcms 1.0.1

package/dist/components/cmsComponents/academy/CmsArticleListGroupByTag.vue

@@ -0,0 +1,262 @@
+<template>
+  <div class="section-article-container">
+    <div class="section-article">
+      <h1 class="section-title">{{ data.title }}</h1>
+      <div class="section-subtitle">
+        {{ $t("cms_academy_group_by_tag_desc", {siteName: $t('site_common_site_name')}) }}
+      </div>
+      <div v-for="tag in formatedData" :key="tag.id" class="tag-wrap">
+        <div class="cms-container">
+          <h3 class="tag-name">{{ tag.name }}</h3>
+          <div :class="['article-wrap', { 'item-two': tag.data.length > 1 }]">
+            <div
+              v-for="article in tag.data"
+              :key="article.id"
+              class="article-item"
+            >
+              <div
+                class="article-img"
+                :style="'background-image: url(' + article.image_url + ');'"
+              ></div>
+              <div class="article-text">
+                <h4 class="article-title">
+                  {{ article.title }}
+                </h4>
+                <div class="article-link">
+                  <router-link
+                    :to="'/academy/' + data.name + '/articles/' + article.name"
+                  >
+                    {{ $t("cms_home_exbang_get_started") }}
+                    <svg-icon
+                      className="link-arrow"
+                      icon-class="arrow-right"
+                    ></svg-icon>
+                  </router-link>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CmsArticleListGroupByTag",
+
+  props: {
+    data: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
+  computed: {
+    // 将数据格式化成按标签分组的数据。
+    // 数据格式：
+    // [{
+    //   id: 1,
+    //   name: "标签名称",
+    //   data: [
+    //     { // 文章对象。
+    //     }
+    //   ]
+    // }]
+    formatedData() {
+      let data = [];
+      let obj = {};
+      this.data.content && this.data.content.forEach((item) => {
+        if (item.tags && item.tags.length > 0) {
+          let hasInsert = false;
+          for (let tag of item.tags) {
+            const key = tag.sort + "-" + tag.id;
+            if (!obj[key]) {
+              obj[key] = {
+                ...tag,
+                data: [],
+              };
+            }
+            // 如果不超过2个则放入
+            if (obj[key].data.length < 2 && !hasInsert) {
+              obj[key].data.push(item);
+              hasInsert = true;
+            }
+          }
+        }
+      });
+      for (let key in obj) {
+        if (obj[key].data.length > 0) {
+          data.push(obj[key]);
+        }
+      }
+      console.log("obj", obj)
+      return data;
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+// 文章列表
+.section-article {
+  padding-top: 100px;
+  padding-bottom: 32px;
+  .section-title {
+    font-size: 32px;
+    font-weight: 600;
+    text-align: center;
+    color: var(--text-color-six);
+    line-height: 36px;
+    margin-bottom: 20px;
+  }
+  .section-subtitle {
+    font-size: 17px;
+
+    text-align: center;
+    color: var(--text-color-six);
+    line-height: 25px;
+    margin-bottom: 18px;
+  }
+  .tag-wrap {
+    border-bottom: 1px solid var(--border-color-extend-two);
+    &:last-child {
+      border-bottom: none;
+    }
+    .tag-name {
+      font-size: 24px;
+
+      text-align: center;
+      color: var(--text-color-six);
+      line-height: 30px;
+      margin-bottom: 20px;
+    }
+  }
+  .article-wrap {
+    display: grid;
+  }
+  .article-item {
+    .article-img {
+      padding-top: 56.25%;
+      background-color: var(--popup-bg);
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+      border-radius: 12px;
+    }
+    .article-title {
+      font-size: 24px;
+
+      color: var(--text-color-six);
+      line-height: 30px;
+      margin-top: 20px;
+    }
+    .article-link {
+      margin-top: 20px;
+      font-size: 16px;
+      line-height: 25px;
+      .svg-icon {
+        width: 14px;
+        height: 14px;
+        /* 禁止鼠标悬停提示文案 */
+        pointer-events: none;
+      }
+    }
+  }
+  // 一行2个时
+  .item-two {
+    display: grid;
+    gap: 30px;
+    .article-title,
+    .article-link {
+      text-align: center;
+    }
+    .article-img {
+      width: 70%;
+      padding-top: 39.375%; // 56.25 * 0.7
+      margin: 0 auto;
+    }
+  }
+}
+@media screen and (min-width: 768px) {
+  .section-article {
+    .article-item {
+      max-width: 800px;
+      margin-left: auto;
+      margin-right: auto;
+      display: grid;
+      gap: 30px;
+      grid-template-columns: 1fr 1fr;
+      align-items: flex-start;
+      .article-img {
+        width: 350px;
+        padding-top: 196.875px;
+        margin: 0 auto;
+        grid-column-start: 2;
+        grid-column-end: 3;
+      }
+      .article-text {
+        grid-row-start: 1;
+      }
+
+      .article-title {
+        text-align: left;
+      }
+      .article-link {
+        text-align: left;
+      }
+    }
+  }
+}
+@media screen and (min-width: 1200px) {
+  .section-article {
+    .cms-container {
+      padding-top: 48px;
+      padding-bottom: 48px;
+    }
+    .section-title {
+      font-size: 48px;
+      line-height: 53px;
+    }
+    .tag-wrap {
+      .tag-name {
+        font-size: 42px;
+        line-height: 42px;
+        margin-bottom: 48px;
+      }
+    }
+    .article-item {
+      .article-title {
+        font-size: 32px;
+        line-height: 42px;
+        text-align: left;
+      }
+      .article-link {
+        font-size: 17px;
+        line-height: 25px;
+        text-align: left;
+      }
+    }
+    .item-two {
+      display: grid;
+      gap: 140px;
+      grid-template-columns: 1fr 1fr;
+      .article-item {
+        display: block;
+        .article-img {
+          width: 240px;
+          padding-top: 135px;
+        }
+        .article-title {
+          text-align: center;
+        }
+        .article-link {
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+</style>

package/dist/components/cmsComponents/academy/CmsArticleListWide.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="section-article-container">
+    <div class="cms-container section-article">
+      <!-- <div class="section-title">Latest Releases</div> -->
+      <div class="article-wrap">
+        <!-- 默认是左文本，右图，增加 class .reverse 可翻转。 -->
+        <div
+          v-for="(item, index) in data.content"
+          :key="item.id"
+          :class="['article-item', { reverse: index % 2 === 0 }]"
+        >
+          <div class="article-text">
+            <h2 class="article-title">
+              {{ item.title }}
+            </h2>
+            <div class="article-summary">
+              {{ item.brief }}
+            </div>
+            <div class="article-link">
+              <router-link
+                :to="'/academy/'+ data.name +'/articles/' + item.name"
+                class="btn-link"
+              >
+                {{ $t("cms_home_exbang_get_started") }}
+                <svg-icon
+                  className="link-arrow"
+                  icon-class="arrow-right"
+                ></svg-icon>
+              </router-link>
+            </div>
+          </div>
+          <div
+            class="article-img"
+            :style="'background-image: url(' + item.image_url + ');'"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CmsArticleListWide",
+  props: {
+    data: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+// 文章列表
+.section-article-container {
+  margin-top: 24px;
+  padding-bottom: 0;
+  .cms-container{
+    padding: 0;
+  }
+  .article-text {
+    padding: 24px 16px;
+  }
+  .section-title {
+    font-size: 20px;
+    line-height: 48px;
+    margin-bottom: 16px;
+    font-family: FontMedium;
+  }
+  .article-wrap {
+    margin-bottom: 40px;
+  }
+  .article-item {
+    display: block;
+    background: var(--popup-bg);
+    margin-bottom: 30px;
+
+    display: grid;
+    gap: 24px;
+    grid-template-columns: 1fr;
+    align-items: center;
+    overflow: hidden;
+    .article-img {
+      padding-top: 56.25%;
+    //   background-color: #eee;
+      background-position: center center;
+      background-repeat: no-repeat;
+      background-size: cover;
+    }
+    .article-title {
+      font-size: 32px;
+      text-align: center;
+      color: var(--text-color-six);
+      line-height: 36px;
+      margin-bottom: 24px;
+    }
+    .article-summary {
+      font-size: 17px;
+      line-height: 25px;
+      color: var(--text-color);
+      text-align: center;
+      margin-bottom: 24px;
+      // display: -webkit-box;
+      // -webkit-box-orient: vertical;
+      // -webkit-line-clamp: 3;
+      // overflow: hidden;
+    }
+    .article-link {
+      margin-top: 20px;
+      font-size: 16px;
+      font-weight: 600;
+      text-align: center;
+      line-height: 25px;
+      .svg-icon {
+        width: 14px;
+        height: 14px;
+        /* 禁止鼠标悬停提示文案 */
+        pointer-events: none;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  // 文章列表
+  .section-article {
+    .article-item {
+      border-radius: 12px;
+      grid-template-columns: 1fr 1fr;
+      // 翻转 文本 和 封面图 的显示顺序
+      &.reverse {
+        .article-text {
+          grid-column-start: 2;
+          grid-column-end: 3;
+        }
+        .article-img {
+          grid-row-start: 1;
+        }
+      }
+    }
+  }
+}
+@media screen and (min-width: 1200px) {
+  // 文章列表
+  .section-article {
+    .article-item {
+      border-radius: 12px;
+      .article-text {
+        margin: 40px;
+      }
+    }
+  }
+}
+</style>

package/dist/components/cmsComponents/academy/CmsDetail.vue

@@ -0,0 +1,234 @@
+<template>
+	<div class="article-detail__component">
+		<h1 class="title">{{ detail.title }}</h1>
+		<div class="props-row">
+			{{ detail.update_time | dateyear }}
+			<template v-if="detail.tags && detail.tags.length > 0">
+				<a-tag
+					v-for="tag in detail.tags"
+					:key="tag.id"
+					color="var(--popup-bg)"
+				>
+					{{ tag.name }}
+				</a-tag>
+			</template>
+			<!-- in {{ detail.type }} -->
+		</div>
+		<div class="cover-wrap" v-if="detail.show_cover">
+			<div class="cover">
+				<img :src="detail.img_src || detail.image_url" alt="" />
+			</div>
+		</div>
+		<!-- <div class="cover-wrap">
+      <div class="cover">
+        <img
+          src="https://academy.binancezh.top/_next/image?url=https%3A%2F%2Fimage.binance.vision%2Fuploads-original%2F2dde1146856049b0825c1bae268762c8.png&w=1920&q=100"
+          alt=""
+        />
+      </div>
+    </div> -->
+		<!-- 内容区域 -->
+
+		<article
+			class="article-content__container"
+			v-html="detail.description"
+		></article>
+		<!-- <div class="download">
+        <div class="download-title">{{ $t("cms_announcement_download") }}</div>
+        <a class="whitepaper-down opcHover" download="finilename" href="">
+          filename
+        </a>
+      </div> -->
+	</div>
+</template>
+
+<script>
+import dateyear from "./../../../filter/dateyear";
+
+export default {
+	props: {
+		detail: {
+			type: Object,
+			default: () => ({}),
+		},
+	},
+	filters: {
+		dateyear,
+	},
+};
+</script>
+
+<style lang="less">
+// @import "~@/assets/css/root.scss";
+// @import "~@/assets/css/academy/index.scss";
+</style>
+<style lang="less">
+.article-detail__component {
+	max-width: 1032px;
+	margin-bottom: 80px;
+	margin: 0 auto;
+
+	.title {
+		color: var(--text-color);
+		// font-family: FontMedium;
+		text-align: center;
+		max-width: 820px;
+		margin: 0 auto 10px;
+	}
+	.props-row {
+		font-size: 14px;
+		// font-family: Font;
+
+		text-align: center;
+		color: var(--text-color-four);
+		line-height: 32px;
+		max-width: 820px;
+		margin: 0 auto 40px;
+		.ant-tag {
+			margin-left: 8px;
+            color: var(--text-color);
+		}
+	}
+	.cover-wrap {
+		text-align: center;
+		margin-bottom: 40px;
+		.cover {
+			border-radius: 8px;
+			box-shadow: 0px 10px 20px 0px rgba(52, 58, 64, 0.18);
+			overflow: hidden;
+			display: inline-block;
+			img {
+				max-width: 100%;
+				height: auto;
+				display: block;
+			}
+		}
+	}
+	.download {
+		max-width: 800px;
+		margin: 30px auto;
+		.download-title {
+			font-size: 16px;
+			// font-family: FontSemiBold;
+			font-weight: SemiBold;
+			color: var(--text-color-four);
+			line-height: 26px;
+			margin-bottom: 10px;
+		}
+		a {
+			font-size: 16px;
+			// font-family: Font;
+			color: var(--primary-color);
+			line-height: 26px;
+		}
+	}
+}
+.article-content__container {
+	max-width: 820px;
+	line-height: 1.45;
+	margin: 0 auto 20px;
+	font-size: 16px;
+	line-height: 1.45;
+	color: var(--text-color-four);
+	div,
+	p {
+		font-size: 16px;
+		// font-family: Font;
+
+		line-height: 1.45;
+		color: var(--text-color-four);
+		margin-bottom: 24px;
+	}
+
+	img {
+		width: 100%;
+		max-width: 100%;
+		height: auto;
+		margin-bottom: 24px;
+	}
+
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6 {
+		font-size: 32px;
+		// font-family: FontMedium;
+		font-weight: 600;
+		color: var(--text-color-four);
+		margin-bottom: 1em;
+	}
+
+	h2 {
+		font-size: 28px;
+	}
+	h3 {
+		font-size: 24px;
+	}
+	h4 {
+		font-size: 20px;
+	}
+	h5 {
+		font-size: 16px;
+	}
+	h6 {
+		font-size: 14px;
+	}
+
+	ul {
+		margin-bottom: 32px;
+    	list-style: disc;
+		li {
+			font-size: 16px;
+			// font-family: Font;
+			color: var(--text-color-four);
+			margin-bottom: 32px;
+		}
+	}
+	ol{
+		list-style: decimal;
+	}
+}
+@media screen and (min-width: 768px) {
+	.article-detail__component {
+		// .title {
+		//   font-size: 34px;
+		//   margin-bottom: 14px;
+		// }
+		.props-row {
+			margin-bottom: 52px;
+		}
+		.cover-wrap {
+			margin-bottom: 52px;
+		}
+	}
+	.article-content__container {
+		div,
+		p {
+			margin-bottom: 28px;
+		}
+	}
+}
+
+@media screen and (min-width: 1200px) {
+	.article-detail__component {
+		// .title {
+		//   font-size: 40px;
+		//   margin-bottom: 20px;
+		// }
+		.props-row {
+			margin-bottom: 64px;
+		}
+		.cover-wrap {
+			margin-bottom: 64px;
+		}
+	}
+	.article-content__container {
+		div,
+		p {
+			margin-bottom: 32px;
+		}
+	}
+}
+</style>