亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定

老師，Content.vue組件樣式代碼沒有啊

課程沒有出現Content.vue組件樣式代碼，自己寫了一份樣式代碼，賊難看了

正在回答

1 回答

你好，Content.vue代碼不多，主要是做目錄的展示，這里我提供一份源碼供你參考

<template>
??<transition?name="slide-right">
????<div?class="content">
??????<div?class="content-wrapper"?v-if="bookAvailable">
????????<div?class="content-item"?v-for="(item,?index)?in?navigation.toc"?:key="index"?@click="jumpTo(item.href)">
??????????<span?class="text">{{item.label}}</span>
????????</div>
??????</div>
??????<div?class="empty"?v-else>加載中...</div>
????</div>
??</transition>
</template>

<script?type="text/ecmascript-6">
?export?default?{
?props:?{
?ifShowContent:?Boolean,
??????navigation:?Object,
??????bookAvailable:?Boolean
?},
????methods:?{
?jumpTo(target)?{
?this.$emit('jumpTo',?target)
?}
????}
??}
</script>

<style?lang="scss"?rel="stylesheet/scss"?scoped>
?@import?"../assets/styles/global";
??.content?{
????position:?absolute;
????top:?0;
????left:?0;
????z-index:?102;
????width:?80%;
????height:?100%;
????background:?white;
????.content-wrapper?{
??????width:?100%;
??????height:?100%;
??????overflow:?auto;
??????.content-item?{
????????padding:?px2rem(20)?px2rem(15);
????????border-bottom:?px2rem(1)?solid?#f4f4f4;
????????.text?{
??????????font-size:?px2rem(14);
??????????color:?#333;
????????}
??????}
????}
????.empty?{
??????width:?100%;
??????height:?100%;
??????@include?center;
??????font-size:?px2rem(16);
??????color:?#333;
????}
??}
</style>


2 回復 有任何疑惑可以回復我~
#1

Zz皓 提問者

非常感謝！
2018-08-28 回復 有任何疑惑可以回復我~
#2

Zz皓 提問者

謝謝老師，剛剛我自己把它整出來了。問題不是出現在這個組件上，而是global.scss中少了一些過渡動畫代碼。還有就是我剛才把源碼公布了，您不會怪我吧....這是源碼地址：https://github.com/CruxF/IMOOC/tree/master/Vue?1535436767636
2018-08-28 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

老師，Content.vue組件樣式代碼沒有啊

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號