udxcms 1.0.1

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

@@ -0,0 +1,202 @@
+<template>
+  <!-- join community -->
+  <div class="section-joinCommunity-container" :style="styleObj">
+    <div class="cms-container section-joinCommunity">
+      <h1 class="title">{{ $t("cms_academy_media_title", {
+          site_common_site_name: $t("site_common_site_name")
+        }) }}</h1>
+      <div class="content">
+        {{ $t("cms_academy_media_desc") }}
+      </div>
+      <div class="grid" :style="{'grid-template-columns': 'repeat(' + (containerWidth <= 768 ? 1 : (data.length >= 3 ? 3  : 1)) +', minmax(300px, 1fr))'}">
+        <a
+          v-for="(item, index) in data"
+          :key="index"
+          :href="item.site"
+          target="_blank"
+          class="grid-item"
+          :style="itemStyleObj"
+        >
+          <img :src="item.logo" alt="" />
+          <div class="text-wrap">
+            <div class="grid-item-title" :style="itemTitleStyleObj">{{ item.name }}</div>
+            <div class="grid-item-subtitle ellipsis" :style="itemSubtitleStyleObj">{{ item.description }}</div>
+          </div>
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {unwrapJSONStr} from "@/common_modules/cms-submodule/utils/parse";
+
+export default {
+  name: "CmsAcdemyJoinComunity",
+  props: {
+    data: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      bg: "", // 背景图
+      containerWidth: window.innerWidth,
+      academyJoinCommunity: null,
+    };
+  },
+  computed: {
+    styleObj() {
+      if (this.bg) {
+        return {
+          backgroundImage: `url('${this.bg}')`,
+        };
+      }
+      return {};
+    },
+    itemStyleObj() {
+      if (!this.academyJoinCommunity) return {};
+      return this.academyJoinCommunity.button || {};
+    },
+    itemTitleStyleObj() {
+      if (!this.academyJoinCommunity) return {};
+      return this.academyJoinCommunity.title || {};
+    },
+    itemSubtitleStyleObj() {
+      if (!this.academyJoinCommunity) return {};
+      return this.academyJoinCommunity.subtitle || {};
+    },
+  },
+  created() {
+    if (this.$t("cms_academy_media_bg") !== "cms_academy_media_bg") {
+      this.bg = this.$t("cms_academy_media_bg");
+    }
+    this.getAcademySettings();
+    // this.bg =
+    //   "https://dutqrp9tzdxt4.cloudfront.net/2021/08/28/2e35ba98-0433-4c45-8d49-62b915cc1c1f.png";
+  },
+  methods: {
+
+		getAcademySettings() {
+			// TODO：全局解析服务端配置。
+			// 从配置中获取banner配置。
+			try {
+				let indexConfigList =
+                    theme_config &&
+					theme_config.length &&
+					theme_config[0].pageList &&
+					theme_config[0].pageList.filter((v) => {
+					return v.pageKey == "common";
+					});
+				let indexConfig =
+                    indexConfigList &&
+					indexConfigList.length &&
+					indexConfigList[0].configList &&
+					indexConfigList[0].configList.filter((v) => {
+					return v.componentsKey == "common_conf";
+					});
+				let indexConfig_obj =
+					(indexConfig && indexConfig.length &&
+					indexConfig[0].config &&
+            unwrapJSONStr(indexConfig[0].config));
+				console.log('academyJoinCommunity indexConfig_obj:', indexConfig_obj);
+				if (indexConfig_obj.academyJoinCommunity) {
+					this.academyJoinCommunity = indexConfig_obj.academyJoinCommunity;
+				}
+			} catch (error) {
+
+			}
+		},
+  }
+};
+</script>
+
+<style lang="less" scoped>
+// join the MOBI community
+.section-joinCommunity-container {
+  background-color: #172026;
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  // background-image: url("~@/assets/img/cms/bg-joinComunity-1.png");
+}
+.section-joinCommunity {
+  padding-top: 72px;
+  padding-bottom: 72px;
+  color: #fff;
+  .title {
+    // font-family: FontMedium;
+    text-align: center;
+    margin-bottom: 12px;
+  }
+  .content {
+    max-width: 800px;
+    margin-left: auto;
+    margin-right: auto;
+    font-size: 17px;
+
+    text-align: center;
+    color: #ffffff;
+    line-height: 25px;
+    margin-bottom: 25px;
+  }
+  .grid {
+    margin-top: 36px;
+    display: grid;
+    gap: 25px;
+    grid-template-columns: 1fr;
+    justify-content: center;
+    justify-items: center;
+  }
+  .grid-item {
+    display: flex;
+    background: #fbfbfb;
+    box-shadow: 0px 4px 11px 0px rgba(1, 1, 1, 0.1);
+    border-radius: 20px;
+    height: 88px;
+    align-items: center;
+    padding-left: 30px;
+    min-width: 320px;
+    max-width: 100%;
+    img {
+      width: 48px;
+      height: 48px;
+    }
+    .text-wrap {
+      margin-left: 16px;
+      .grid-item-title {
+        font-size: 20px;
+        color: var(--text-color-four);
+        line-height: 24px;
+      }
+      .grid-item-subtitle {
+        font-size: 14px;
+        color: #3d5066;
+        line-height: 18px;
+        padding-right: 10px;
+      }
+    }
+  }
+}
+
+@media screen and (min-width: 768px) {
+  // join the MOBI community
+  .section-joinCommunity {
+    .grid {
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+}
+@media screen and (min-width: 1200px) {
+  // join the MOBI community
+  .section-joinCommunity {
+    .title {
+      margin-bottom: 16px;
+    }
+    .grid {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,229 @@
+<template>
+	<div class="section-one-container" :style="bannerBgStyle">
+		<div class="cms-container section-one">
+			<div class="text-wrap">
+				<h1 class="text-title" :style="titleStyle">{{ data.title }}</h1>
+				<div class="text-content" :style="descStyle">
+					{{ data.brief }}
+				</div>
+				<div class="btn-wrap">
+					<router-link
+						:to="
+							'/academy/' +
+								categoryCode +
+								'/articles/' +
+								data.name
+						"
+						class="btn btn-outline-primary btn-rounded"
+						role="button"
+					>
+						{{ $t("cms_home_exbang_get_started") }}
+					</router-link>
+				</div>
+			</div>
+			<div
+				class="img-wrap"
+				:style="'background-image: url(' + data.image_url + ')'"
+			></div>
+		</div>
+	</div>
+</template>
+
+<script>
+import {unwrapJSONStr} from "@/common_modules/cms-submodule/utils/parse";
+
+/**
+ * @props data 文章对象
+ */
+export default {
+	name: "CmsAcdemySectionOne",
+	props: {
+		data: {
+			// 文章对象。
+			type: Object,
+			default: function() {
+				return {};
+			},
+		},
+		categoryCode: {
+			type: String,
+			default: () => "",
+		},
+	},
+	data() {
+		return {
+			academyBannerTitleColor: '',
+			academyBannerDescColor: '',
+			academyBannerBackgroundColor: '',
+		}
+	},
+	computed: {
+		bannerBgStyle() {
+			return {
+				backgroundColor: this.academyBannerBackgroundColor || "var(--popup-bg)",
+				color: this.academyBannerColor,
+			}
+		},
+		titleStyle() {
+			return {
+				color: this.academyBannerTitleColor || 'var(--text-color)',
+			}
+		},
+		descStyle() {
+			return {
+				color: this.academyBannerDescColor || 'var(--text-color-secondary)',
+			}
+		}
+	},
+	created() {
+		this.getAcademySettings();
+	},
+	methods: {
+		getAcademySettings() {
+			// TODO：全局解析服务端配置。
+			// 从配置中获取banner配置。
+			try {
+				let indexConfigList =
+                    theme_config &&
+					theme_config.length &&
+					theme_config[0].pageList &&
+					theme_config[0].pageList.filter((v) => {
+					return v.pageKey == "common";
+					});
+				let indexConfig =
+                    indexConfigList &&
+					indexConfigList.length &&
+					indexConfigList[0].configList &&
+					indexConfigList[0].configList.filter((v) => {
+					return v.componentsKey == "common_conf";
+					});
+				let indexConfig_obj =
+					(indexConfig && indexConfig.length &&
+					indexConfig[0].config &&
+            unwrapJSONStr(indexConfig[0].config));
+				console.log('indexConfig_obj:', indexConfig_obj);
+				if (indexConfig_obj.academyBannerTitleColor) {
+					this.academyBannerTitleColor = indexConfig_obj.academyBannerTitleColor;
+				}
+				if (indexConfig_obj.academyBannerDescColor) {
+					this.academyBannerDescColor = indexConfig_obj.academyBannerDescColor;
+				}
+				if (indexConfig_obj.academyBannerBackgroundColor) {
+					this.academyBannerBackgroundColor = indexConfig_obj.academyBannerBackgroundColor;
+				}
+			} catch (error) {
+
+			}
+		},
+	}
+};
+</script>
+
+<style lang="less" scoped>
+// 第一块
+.section-one-container {
+	background: #fcfcfc;
+}
+.section-one {
+	// height: 550px;
+	display: grid;
+	grid-template-columns: 1fr;
+	gap: 24px;
+	align-items: center;
+	justify-items: stretch;
+	padding-top: 40px;
+	padding-bottom: 0;
+	.text-wrap {
+		.text-title {
+			// font-family: FontSemiBold;
+			// color: var(--text-color);
+			text-align: center;
+			margin-bottom: 12px;
+		}
+		.text-content {
+			font-size: 16px;
+
+			color: #3d5066;
+			line-height: 26px;
+			text-align: center;
+			margin-bottom: 20px;
+		}
+		.btn-wrap {
+			text-align: center;
+			margin-bottom: 1rem;
+		}
+		.btn {
+			display: inline-block;
+			margin-bottom: 0;
+
+			text-align: center;
+			white-space: nowrap;
+			vertical-align: middle;
+			-ms-touch-action: manipulation;
+			touch-action: manipulation;
+			cursor: pointer;
+			background-image: none;
+			padding: 8px 18px;
+			font-size: 14px;
+			line-height: 1.42857143;
+			border-radius: 4px;
+			-webkit-user-select: none;
+			-moz-user-select: none;
+			-ms-user-select: none;
+			user-select: none;
+			transition: all 300ms ease-in-out;
+            background: var(--primary-bg-color);
+            border: var(--primary-bg-color);
+            color: var(--white);
+		}
+	}
+	.img-wrap {
+		width: 92.9%;
+		padding-top: 92.9%;
+		margin: auto;
+
+		background-position: center center;
+		background-repeat: no-repeat;
+		background-size: contain;
+	}
+}
+
+@media screen and (min-width: 768px) {
+	.section-one {
+		grid-template-columns: 1fr 0.8fr;
+		.text-wrap {
+			max-width: 500px;
+
+			.text-title {
+				text-align: left;
+			}
+			.text-content {
+				text-align: left;
+			}
+			.btn-wrap {
+				text-align: left;
+			}
+		}
+	}
+}
+@media screen and (min-width: 1200px) {
+	.section-one {
+		grid-template-columns: 1fr 1fr;
+		padding-top: 50px;
+
+		.text-wrap {
+			width: 500px;
+			.text-title {
+				margin-bottom: 25px;
+			}
+			.text-content {
+				text-align: left;
+				margin-bottom: 25px;
+			}
+			.text-btn {
+				margin: 0 auto 0 0;
+			}
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,173 @@
+<template>
+	<div class="section-article-container">
+		<div class="cms-container section-article">
+			<div class="section-title">
+				<h4>{{ data.title }}</h4>
+			</div>
+			<div class="article-wrap">
+				<div
+					v-for="item in data.content"
+					:key="item.id"
+					class="article-item"
+				>
+					<router-link
+						:to="'/academy/' + data.name + '/articles/' + item.name"
+					>
+						<div
+							class="article-img"
+							:style="
+								'background-image: url(' + item.image_url + ');'
+							"
+						></div>
+						<div
+							v-if="item.tags && item.tags.length > 0"
+							class="article-tag"
+						>
+							<!-- <span
+								v-for="tag in item.tags"
+								:key="tag.id"
+								class="tag-item"
+								>{{ tag.name }}</span
+							> -->
+							<a-tag
+								v-for="tag in item.tags"
+								:key="tag.id"
+								color="var(--primary-color)"
+							>
+								{{ tag.name }}
+							</a-tag>
+						</div>
+						<h4 class="article-title">
+							{{ item.title }}
+						</h4>
+						<div class="article-date">
+							<span class="time">{{
+								item.update_time | dateyear
+							}}</span>
+						</div>
+					</router-link>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import dateyear from "../../../filter/dateyear";
+export default {
+	name: "CmsArticleList",
+	props: {
+		data: {
+			type: Object,
+			default: function() {
+				return {};
+			},
+		},
+	},
+	filters: {
+		dateyear,
+	},
+};
+</script>
+
+<style lang="less" scoped>
+// 文章列表
+.section-article {
+	padding-bottom: 0;
+	.section-title {
+		height: 48px;
+		line-height: 48px;
+		margin-bottom: 16px;
+		font-family: FontMedium;
+		h4 {
+			line-height: 48px;
+			color: var(--text-color);
+		}
+	}
+	.article-wrap {
+		display: grid;
+		grid-template-columns: 1fr;
+		gap: 24px;
+		margin-bottom: 40px;
+	}
+	.article-item {
+		a {
+			display: block;
+			background: #ffffff;
+			border: 1px solid #e9ecef;
+			border-radius: 12px;
+			transition: box-shadow 250ms ease-in;
+			box-shadow: 0px 1px 6px 0px rgba(52, 58, 64, 0.12);
+		}
+		a:hover {
+			box-shadow: 0px 1px 12px 0px rgba(52, 58, 64, 0.34);
+		}
+		.article-img {
+			padding-top: 50%;
+			border-radius: 12px 12px 0 0;
+			background-color: #eee;
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: cover;
+		}
+		.article-tag {
+			font-size: 16px;
+			text-align: left;
+			color: var(--primary-color);
+			height: 25px;
+			line-height: 25px;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			margin: 24px 24px 12px;
+			display: flex;
+			align-items: center;
+			+ .article-title {
+				height: 84px;
+			}
+		}
+		.article-title {
+			// height: 84px;
+			height: 133px;
+			line-height: 28px;
+			margin: 24px;
+			color: var(--text-color);
+			font-family: Font;
+
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			-webkit-line-clamp: 3;
+			overflow: hidden;
+		}
+		.article-date {
+			border-top: 1px solid #f1f1f1;
+			height: 56px;
+			display: flex;
+			align-items: center;
+			padding-left: 24px;
+			.time {
+				line-height: 16px;
+				font-size: 16px;
+				overflow: hidden;
+				color: #868f9a;
+			}
+		}
+	}
+}
+
+@media screen and (min-width: 768px) {
+	// 文章列表
+	.section-article {
+		.article-wrap {
+			grid-template-columns: 1fr 1fr;
+		}
+	}
+}
+@media screen and (min-width: 1200px) {
+	// 文章列表
+	.section-article {
+		.article-wrap {
+			grid-template-columns: 1fr 1fr 1fr;
+		}
+	}
+}
+</style>