udxcms 1.0.9 → 1.0.10

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

@@ -1,262 +0,0 @@
-<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

@@ -1,155 +0,0 @@
-<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

@@ -1,234 +0,0 @@
-<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>