| | |
| | | <template> |
| | | <div id="app"> |
| | | <childHealth v-if="activeBook.name == 'childHealth'"></childHealth> |
| | | <book v-if="activeBook.name == 'content'"></book> |
| | | <lifeCare v-if="activeBook.name == 'lifeCare'"></lifeCare> |
| | | <embedded v-if="activeBook.name == 'embedded'"></embedded> |
| | | <english v-if="activeBook.name == 'english'"></english> |
| | | <sportsAndHealth v-if="activeBook.name == 'sportsAndHealth'"></sportsAndHealth> |
| | | <artAndDance v-if="activeBook.name == 'artAndDance'"></artAndDance> |
| | | <artAndDrama v-if="activeBook.name == 'artAndDrama'"></artAndDrama> |
| | | <mathBook v-if="activeBook.name == 'mathBook'"></mathBook> |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import childHealth from "./books/childHealth/view/index.vue"; |
| | | import book from "./books/content/index.vue"; |
| | | import embedded from "./books/embedded/view/index.vue"; |
| | | import english from "./books/English/view/index.vue"; |
| | | |
| | | export default { |
| | | name: "App", |
| | | components: { |
| | | childHealth, |
| | | book, |
| | | embedded, |
| | | english |
| | | childHealth: () => import("./books/childHealth/view/index.vue"), |
| | | lifeCare: () => import("./books/lifeCare/view/index.vue"), |
| | | embedded: () => import("./books/embedded/view/index.vue"), |
| | | english: () => import("./books/english/view/index.vue"), |
| | | sportsAndHealth: () => import("./books/sportsAndHealth/view/index.vue"), |
| | | artAndDance: () => import("./books/artAndDance/view/index.vue"), |
| | | mathBook: () => import("./books/mathBook/view/index.vue"), |
| | | artAndDrama: () => import("./books/artAndDrama/view/index.vue") |
| | | |
| | | }, |
| | | data() { |
| | | return { |
| | |
| | | async created() { |
| | | if (this.setGlobalState) { |
| | | this.setGlobalState({ |
| | | initTestBook: async (bookId) => { |
| | | this.activeBook = await this.config.getBookConfig(bookId); |
| | | |
| | | initTestBook: async (bookId, tryPageCount) => { |
| | | |
| | | this.activeBook = await this.config.getBookConfig( |
| | | process.env.VUE_APP_RESOURCE_CTX + process.env.VUE_APP_BOOK_ID |
| | | ); |
| | | |
| | | this.config.activeBook = this.activeBook; |
| | | this.config.goodsStore = this.activeBook.storeRefcode; |
| | | console.log("图书", this.activeBook); |
| | | if (tryPageCount) { |
| | | this.activeBook.tryPageCount = tryPageCount; |
| | | } |
| | | if ( |
| | | (this.$store.state.qiankun, this.$store.state.qiankun.getBookConfig) |
| | | ) { |
| | |
| | | } |
| | | }); |
| | | } else { |
| | | this.activeBook = await this.config.getBookConfig(); |
| | | // childHealth |
| | | // lifeCare |
| | | // sportsAndHealth |
| | | // embedded |
| | | // english |
| | | // artAndDance |
| | | // artAndDrama |
| | | // mathBook |
| | | this.activeBook = await this.config.getBookConfig( |
| | | process.env.VUE_APP_RESOURCE_CTX + |
| | | (process.env.VUE_APP_ENV == "product" |
| | | ? process.env.VUE_APP_BOOK_ID |
| | | : "sportsAndHealth") |
| | | ); |
| | | // 测试试读30页 |
| | | // this.activeBook.tryPageCount = 10; |
| | | this.config.activeBook = this.activeBook; |
| | | this.config.goodsStore = this.activeBook.storeRefcode; |
| | | } |
| | | }, |
| | | methods: { |
| | | |
| | | but() { |
| | | console.log(this.activeBook, 'this.activeBook789'); |
| | | } |
| | | |
| | | } |
| | | }; |
| | | |
| | | </script> |
| | | |
| | | <style lang="less"> |
| | |
| | | height: 100%; |
| | | margin: 0; |
| | | } |
| | | |
| | | #app { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | |
| | | .highLight { |
| | | border: 1px dashed rgba(255, 255, 255, 0); |
| | | border-radius: 5px; |
| | | padding: 3px; |
| | | padding: 3px 0; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .highLight:hover { |
| | | border: 1px dashed #949494 !important; |
| | | } |
| | | |
| | | .underline { |
| | | border: 1px dashed rgba(255, 255, 255, 0); |
| | | padding: 5px; |
| | | padding: 5px 0; |
| | | border-radius: 5px; |
| | | text-decoration: underline; |
| | | text-decoration-style: wavy; |
| | | text-underline-thickness: 2px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .underline:hover { |
| | | border: 1px dashed #949494 !important; |
| | | } |
| | |
| | | .notesline { |
| | | padding-bottom: 2px; |
| | | border-bottom: 2px solid; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | /* swiper */ |
| | | .swiper-container { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | |
| | | .swiper-pagination-bullet-active { |
| | | background-color: #0093ff; |
| | | } |
| | | |
| | | .swiper-button-prev, |
| | | .swiper-button-next { |
| | | width: 27px; |
| | | height: 44px; |
| | | margin-top: -22px; |
| | | z-index: 10; |
| | | cursor: pointer; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | color: #0093ff; |
| | | } |
| | | |
| | | .swiper-button-prev:after, |
| | | .swiper-button-next:after { |
| | | font-family: swiper-icons; |
| | | font-size: 30px; |
| | | text-transform: none !important; |
| | | letter-spacing: 0; |
| | | text-transform: none; |
| | | font-variant: initial; |
| | | line-height: 1; |
| | | } |
| | | |
| | | .imgBox { |
| | | position: relative; |
| | | } |
| | | |
| | | .imgBox img { |
| | | max-width: 100%; |
| | | max-height: 100%; |
| | | width: auto; |
| | | height: auto; |
| | | position: absolute; |
| | | top: 0; |
| | | right: 0; |
| | | bottom: 0; |
| | | left: 0; |
| | | margin: auto; |
| | | } |
| | | |
| | | .openImgBox img { |
| | | cursor: zoom-in; |
| | | } |
| | | </style> |