Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c395e27
commit fa9f24d
Showing
21 changed files
with
723 additions
and
85 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| <template> | ||
| <div class="more__item clearfix"> | ||
| <p class="more__item--text">{{ content }}</p> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent, PropType, computed, unref, onMounted, nextTick, ref } from 'vue' | ||
| export default defineComponent({ | ||
| name: 'More', | ||
| props: { | ||
| // 内容 | ||
| content: { | ||
| type: String as PropType<string>, | ||
| default: '' | ||
| }, | ||
| // 默认展示几行 | ||
| lineClamp: { | ||
| type: Number as PropType<number>, | ||
| default: 0 | ||
| }, | ||
| // 宽度 | ||
| width: { | ||
| type: String as PropType<string>, | ||
| default: '300px' | ||
| }, | ||
| // style | ||
| style: { | ||
| type: Object as PropType<object>, | ||
| default: () => { | ||
| return { | ||
| width: '300px', | ||
| float: 'left' | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| setup(props) { | ||
| const styleObj = computed(() => { | ||
| }) | ||
| } | ||
| }) | ||
| </script> | ||
|
|
||
| <style lang="less" scoped> | ||
| .more__item { | ||
| width: 528px; | ||
| height: 122px; | ||
| float: left; | ||
| .more__item--text { | ||
| width: 476px; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| display: -webkit-box; | ||
| -webkit-line-clamp: 3; | ||
| -webkit-box-orient: vertical; | ||
| font-size: 14px; | ||
| color: #545c63; | ||
| line-height: 28px; | ||
| transition: all .1s; | ||
| text-align: left; | ||
| &:hover { | ||
| background: #fff; | ||
| height: auto; | ||
| position: relative; | ||
| z-index: 5; | ||
| border-radius: 8px; | ||
| box-shadow: 0 8px 16px 0 rgba(7,17,27,.2); | ||
| -webkit-line-clamp: inherit; | ||
| padding: 10px; | ||
| margin-top: -10px; | ||
| margin-left: -10px; | ||
| } | ||
| } | ||
| } | ||
| .clearfix:after { | ||
| content: ""; | ||
| display: block; | ||
| height: 0; | ||
| clear: both; | ||
| visibility: hidden; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| <template> | ||
| <div> | ||
| <el-alert | ||
| effect="dark" | ||
| :closable="false" | ||
| title="显示更多组件。" | ||
| type="info" | ||
| style="margin-bottom: 20px;" | ||
| /> | ||
|
|
||
| <el-alert | ||
| effect="dark" | ||
| :closable="false" | ||
| title="默认显示一行，超出隐藏。" | ||
| type="info" | ||
| style="margin-bottom: 20px;margin-top: 20px;" | ||
| /> | ||
| <div> | ||
| <More :line-clamp="3" content="2020版是根据（前端）全栈工程师岗位要求，结合时下技术热点及未来前端术发展趋势全新制作的课程，让你实现从零基础到具备全栈能力的就业水平。相比之前的版本，我们有几大重要内容：1. 两大核心企业项目贯穿整个体系，实现项目闭环开发，亲历从0到1的企业级项目。项目之间强关联，还原企业开发模式，渐进式实现，过程更顺滑。第一个旅游网项目，还原企业迭代开发，同一个项目从PC端演变到移动webapp，掌握跨端开发能力。 第二个电商全栈项目，用Vue.js 实现前端，node.js+koa2+MongoDB实现后端，打造6大核心业务，15+精美网页，12+真实数据接口，并打通前后端数据联调。2. 项目驱动式教学，案例融入课程讲解中，让学习不枯燥。多领域案例帮你开拓眼界和经验。3. 不用担心版本问题，课程截止上线使用最新版本。比如Vue3.0等，让大家学到新技术。4. 技术覆盖更实用更全面，从0基础到全栈能力循序渐进的培养，慕课网宗旨只学有用的。帮你打通跨端和全栈技能。5. 慕课网网红讲师亲授，讲解更细致，阶梯式习题，整门课程代码量将达到6万行，相当于1~2年工作经验所敲代码。" /> | ||
| </div> | ||
| <el-alert | ||
| effect="dark" | ||
| :closable="false" | ||
| title="默认显示3行，超出隐藏。" | ||
| type="info" | ||
| style="margin-bottom: 20px;margin-top: 20px;" | ||
| /> | ||
| <div> | ||
| <More :line-clamp="3" content="2020版是根据（前端）全栈工程师岗位要求，结合时下技术热点及未来前端术发展趋势全新制作的课程，让你实现从零基础到具备全栈能力的就业水平。相比之前的版本，我们有几大重要内容：1. 两大核心企业项目贯穿整个体系，实现项目闭环开发，亲历从0到1的企业级项目。项目之间强关联，还原企业开发模式，渐进式实现，过程更顺滑。第一个旅游网项目，还原企业迭代开发，同一个项目从PC端演变到移动webapp，掌握跨端开发能力。 第二个电商全栈项目，用Vue.js 实现前端，node.js+koa2+MongoDB实现后端，打造6大核心业务，15+精美网页，12+真实数据接口，并打通前后端数据联调。2. 项目驱动式教学，案例融入课程讲解中，让学习不枯燥。多领域案例帮你开拓眼界和经验。3. 不用担心版本问题，课程截止上线使用最新版本。比如Vue3.0等，让大家学到新技术。4. 技术覆盖更实用更全面，从0基础到全栈能力循序渐进的培养，慕课网宗旨只学有用的。帮你打通跨端和全栈技能。5. 慕课网网红讲师亲授，讲解更细致，阶梯式习题，整门课程代码量将达到6万行，相当于1~2年工作经验所敲代码。" /> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import { defineComponent } from 'vue' | ||
| import More from '_c/More/index.vue' | ||
| export default defineComponent({ | ||
| // name: 'MoreDemo', | ||
| components: { | ||
| More | ||
| } | ||
| }) | ||
| </script> | ||
|
|
||
| <style> | ||
| </style> |
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.