2 files added
10 files modified
| | |
| | | ::-webkit-scrollbar { |
| | | /*滚动条整体样式*/ |
| | | width: 8px; |
| | | height: 8px; |
| | | /*高宽分别对应横竖滚动条的尺寸*/ |
| | | } |
| | | |
| | |
| | | .markdown-body{ |
| | | body{ |
| | | margin: 0 auto; |
| | | font-family: "Microsoft YaHei", arial,sans-serif; |
| | |
| | | padding: 0; |
| | | } |
| | | h1 { |
| | | font-size: 48px; |
| | | font-size: 38px; |
| | | line-height: 54px; |
| | | } |
| | | h2 { |
| | |
| | | -webkit-border-radius: 0 0 6px 0; |
| | | border-radius: 0 0 6px 0; |
| | | } |
| | | |
| | | } |
| | |
| | | <template> |
| | | <a-row type="flex" justify="start"> |
| | | <a-col v-bind="showSmall"> |
| | | <div class="menu"> |
| | | <router-link to="/main1">Home »</router-link> |
| | | </a-col> |
| | | <a-col v-bind="showSmall"> |
| | | <router-link to="/main2">乐谱搜索 »</router-link> |
| | | </a-col> |
| | | <a-col v-bind="showSmall"> |
| | | <router-link to="/main3">我的网盘 »</router-link> |
| | | </a-col> |
| | | <a-col v-bind="showSmall"> |
| | | <router-link to="/main4">友人帐 »</router-link> |
| | | </div> |
| | | </a-col> |
| | | <a-col v-bind="showMain"> |
| | | <a-auto-complete ref="mySearch" v-bind="search" @select="onSelect" @search="onSearch" @change="onChange"> |
| | | <a-auto-complete v-model="search.value" :data-source="search.dataSource" ref="mySearch" v-bind="search" |
| | | @select="onSelect" @search="onSearch" @change="onChange"> |
| | | <a-input @keydown.enter="onSelect"> |
| | | <a-icon slot="suffix" type="search" class="certain-category-icon" /> |
| | | </a-input> |
| | |
| | | allowClear: true, |
| | | // autoFocus: true, |
| | | backfill: true, |
| | | value: '', |
| | | dataSource: [], |
| | | }, |
| | | showSmall: { |
| | | xs: 6, |
| | | sm: 4, |
| | | md: 4, |
| | | lg: 4, |
| | | xl: 4, |
| | | xxl: 4, |
| | | xs: 24, |
| | | sm: 18, |
| | | md: 18, |
| | | lg: 18, |
| | | xl: 18, |
| | | xxl: 18, |
| | | }, |
| | | showMain: { |
| | | xs: 0, |
| | | sm: 0, |
| | | md: 2, |
| | | lg: 2, |
| | | xl: 2, |
| | | xxl: 2, |
| | | sm: 6, |
| | | md: 6, |
| | | lg: { |
| | | span: 3, |
| | | offset: 3 |
| | | }, |
| | | xl: { |
| | | span: 3, |
| | | offset: 3 |
| | | }, |
| | | xxl: { |
| | | span: 3, |
| | | offset: 3 |
| | | }, |
| | | } |
| | | } |
| | | |
| | |
| | | console.log(e); |
| | | }, |
| | | onSearch(searchText) { |
| | | this.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)]; |
| | | this.search.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)]; |
| | | console.log("补全.."); |
| | | }, |
| | | onSelect(value) { |
| | | console.log('回车', value); |
| | | this.$message.info("回车") |
| | | this.$message.info("回车,内容为" + value) |
| | | }, |
| | | onChange(value) { |
| | | console.log('修改', value); |
| | |
| | | }, |
| | | } |
| | | </script> |
| | | <style lang="less" scoped> |
| | | .menu { |
| | | a { |
| | | margin-left: 10px; |
| | | } |
| | | |
| | | } |
| | | </style> |
New file |
| | |
| | | <template> |
| | | <div class="myModal"> |
| | | <a-modal v-model="visible" title="日志添加" on-ok="handleOk" |
| | | :bodyStyle="{'overflow':'overlay','maxHeight': '550px'}"> |
| | | <template slot="footer"> |
| | | <a-button key="reset" @click="reset" type="danger"> |
| | | 擦掉重来 |
| | | </a-button> |
| | | <a-button key="back" @click="handleCancel"> |
| | | 歇会 |
| | | </a-button> |
| | | <a-button key="submit" type="primary" :loading="loading" @click="handleOk"> |
| | | 完事<span style="font-size: 10px;">儿</span>.. |
| | | </a-button> |
| | | </template> |
| | | <box10 ref="modalBox"></box10> |
| | | </a-modal> |
| | | </div> |
| | | |
| | | </template> |
| | | |
| | | <script> |
| | | import box10 from "../mini/box10-add.vue" |
| | | export default { |
| | | components: { |
| | | box10 |
| | | }, |
| | | data() { |
| | | return { |
| | | visible: false, |
| | | loading: false, |
| | | } |
| | | }, |
| | | methods: { |
| | | getCalendarContainer(trigger) { |
| | | return this.$refs.myModal; |
| | | }, |
| | | showModal() { |
| | | this.visible = true; |
| | | }, |
| | | handleOk(e) { |
| | | console.log(this.$refs.modalBox.form); |
| | | var res = this.$refs.modalBox.$refs.myForm.validate(valid => { |
| | | if (valid) { |
| | | this.$message.info("校验通过") |
| | | } else { |
| | | this.$message.info("校验失败") |
| | | return false; |
| | | } |
| | | }); |
| | | |
| | | |
| | | if (!res) return; |
| | | |
| | | this.$message.info("提交表单") |
| | | |
| | | this.loading = true; |
| | | setTimeout(() => { |
| | | this.visible = false; |
| | | this.loading = false; |
| | | }, 3000); |
| | | }, |
| | | reset(e) { |
| | | var res = this.$refs.modalBox.$refs.myForm.resetFields() |
| | | }, |
| | | handleCancel(e) { |
| | | this.visible = false; |
| | | }, |
| | | |
| | | }, |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | </style> |
| | |
| | | :defaultPageSize="pageSize" :total="total" /> |
| | | </div> |
| | | </a-row> |
| | | <a-back-top> |
| | | <a-icon type="up" />回到顶部 |
| | | </a-back-top> |
| | | |
| | | </div> |
| | | </template> |
| | | <script> |
| | |
| | | console.log(this.current); |
| | | console.log(this.busy); |
| | | |
| | | if (data.length > 15) { |
| | | if (data.length > 3) { |
| | | this.$message.warning('没有更多了'); |
| | | this.busy = true; |
| | | this.loading = false; |
| | |
| | | <template> |
| | | <div class="blog-right-side fadeInRight"> |
| | | <div class="blog-cell "> |
| | | <box4 v-bind="vo4"></box4> |
| | | </div> |
| | | <!-- <div class="blog-cell "> |
| | | <box4 v-bind="vo1"></box4> |
| | | </div> |
| | | <div class="blog-cell "> |
| | | <box4 v-bind="vo2"></box4> |
| | | </div> |
| | | </div> --> |
| | | <div class="blog-cell "> |
| | | <box4 v-bind="vo3"></box4> |
| | | <div class="blog-right-side-exchange"> |
| | | </div> |
| | | </div> |
| | | <div class="blog-cell "> |
| | | <box4 v-bind="vo4"></box4> |
| | | </div> |
| | | |
| | | </div> |
New file |
| | |
| | | <template> |
| | | <a-affix :offset-top="600"> |
| | | |
| | | <div style="padding-left:5px;"> |
| | | <a-button @click="showDrawer1"> |
| | | 抽屉1 |
| | | </a-button> |
| | | <!-- <a-button @click="showDrawer2"> |
| | | 抽屉2 |
| | | </a-button> --> |
| | | <a-button @click="showModal"> |
| | | 日志 |
| | | <a-icon type="plus-circle" style="margin-left: 0px;" /> |
| | | </a-button> |
| | | |
| | | <a-button> |
| | | 工具 |
| | | <a-icon type="tool" style="margin-left: 0px;" /> |
| | | </a-button> |
| | | </div> |
| | | </a-affix> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | data() { |
| | | return {} |
| | | }, |
| | | methods: { |
| | | showDrawer1() { |
| | | this.$emit('showDrawer1') |
| | | }, |
| | | showModal() { |
| | | this.$emit('showModal') |
| | | } |
| | | }, |
| | | } |
| | | </script> |
| | | |
| | | <style> |
| | | </style> |
| | |
| | | <AplayerBox /> |
| | | <tagFooter /> |
| | | </a-layout-footer> |
| | | |
| | | <a-back-top> |
| | | <a-icon type="up" />回到顶部 |
| | | </a-back-top> |
| | | |
| | | </a-layout> |
| | | </template> |
| | | |
| | |
| | | .ant-layout {} |
| | | |
| | | .ant-layout-header { |
| | | |
| | | // background-color: #ffffff; |
| | | backdrop-filter: saturate(180%) blur(1em); |
| | | -webkit-backdrop-filter: blur(5px); |
| | | |
| | | background: linear-gradient(90deg, rgba(247, 149, 51, 0.101961) 0, rgba(243, 112, 85, 0.101961) 15%, rgba(239, 78, 123, 0.101961) 30%, rgba(161, 102, 171, 0.101961) 44%, rgba(80, 115, 184, 0.101961) 58%, rgba(16, 152, 173, 0.101961) 72%, rgba(7, 179, 155, 0.101961) 86%, rgba(109, 186, 130, 0.101961) 100%); |
| | | } |
| | | |
| | |
| | | <template> |
| | | <div class="article-meta"> |
| | | <a-button @click="back"> |
| | | <a-button @click="back" style="position: absolute;"> |
| | | <a-icon type="left" /> |
| | | </a-button> |
| | | <a-divider orientation="left"> |
| | | <!-- <a-divider orientation="left"> |
| | | 文章详情 |
| | | </a-divider> |
| | | </a-divider> --> |
| | | <div class="markdown-body article-detail"> |
| | | <vue-markdown :source="source"></vue-markdown> |
| | | </div> |
| | |
| | | } |
| | | </script> |
| | | |
| | | <style scoped > |
| | | /* @import '../../assets/md.less'; */ |
| | | <style lang="less"> |
| | | @import '../../assets/md.less'; |
| | | |
| | | |
| | | .markdown-body { |
| | | padding: 10px 20px 10px 20px; |
| | | box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), |
| | | -8px -8px 18px #ffffff; |
| | | } |
| | | |
| | | /* #test{ |
| | | padding-left: 25%; |
| | |
| | | <template> |
| | | <div> |
| | | <MyModal ref="myModal"></MyModal> |
| | | |
| | | <div class="blog-drawer"> |
| | | <a-drawer placement="left" :closable="false" :visible="visible1" :getContainer="'body'" |
| | | :after-visible-change="afterVisibleChange" @close="onClose1" :zIndex="90" :width=270 |
| | | :bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px'}"> |
| | | :bodyStyle="{padding:'0px'}" |
| | | :wrapStyle="{padding:'0px',top:'60px !important','height':'calc(100% - 60px) !important'}"> |
| | | <boxLeft></boxLeft> |
| | | </a-drawer> |
| | | |
| | | <a-drawer placement="right" :closable="false" :visible="visible2" :getContainer="'body'" |
| | | :after-visible-change="afterVisibleChange" @close="onClose2" :zIndex="90" :width=270 |
| | | :bodyStyle="{padding:'0px'}" :wrapStyle="{padding:'0px',top:'60px'}"> |
| | | <boxRight></boxRight> |
| | | </a-drawer> |
| | | <a-row> |
| | | <a-col v-bind="colApiLeft"> |
| | | <div class="myModal"> |
| | | <a-modal v-model="visible" title="日志添加" on-ok="handleOk"> |
| | | <template slot="footer"> |
| | | <a-button key="reset" @click="reset" type="danger"> |
| | | 擦掉重来 |
| | | </a-button> |
| | | <a-button key="back" @click="handleCancel"> |
| | | 歇会 |
| | | </a-button> |
| | | <a-button key="submit" type="primary" :loading="loading" @click="handleOk"> |
| | | 完事<span style="font-size: 10px;">儿</span>.. |
| | | </a-button> |
| | | </template> |
| | | <box10 ref="modalBox"></box10> |
| | | </a-modal> |
| | | </div> |
| | | </a-col> |
| | | </a-row> |
| | | </div> |
| | | |
| | | <div class="blog-main"> |
| | | |
| | | <a-row> |
| | | <a-col v-bind="colApiLeft"> |
| | | <boxLeft></boxLeft> |
| | | <boxRight></boxRight> |
| | | </a-col> |
| | | <a-col v-bind="colApiMain "> |
| | | |
| | | <a-col v-bind="colApiMain "> |
| | | <a-col v-bind="colMini" :style="{'position':'absolute','right':'30px'}"> |
| | | <a-affix :offset-top="550"> |
| | | <a-button @click="showDrawer1"> |
| | | 小抽屉1 |
| | | 抽屉1 |
| | | </a-button> |
| | | <a-button @click="showDrawer2"> |
| | | 小抽屉2 |
| | | </a-button> |
| | | <a-button @click="showModal"> |
| | | 日志 |
| | | <a-icon type="plus-circle" style="margin-left: 0px;" /> |
| | | </a-button> |
| | | <tempFriendBox></tempFriendBox> |
| | | </a-affix> |
| | | </a-col> |
| | | |
| | | <router-view class="fade"></router-view> |
| | | </a-col> |
| | | |
| | | <a-col v-bind="colApiRight" ref="myDrawer"> |
| | | <boxRight></boxRight> |
| | | <!-- <boxRight></boxRight> --> |
| | | <tool @showModal="showModal" @showDrawer1="showDrawer1"></tool> |
| | | </a-col> |
| | | </a-row> |
| | | </div> |
| | |
| | | |
| | | <script> |
| | | import tempFriendBox from "../group/tempFriendBox.vue" |
| | | import box10 from "../mini/box10-add.vue" |
| | | import boxLeft from "../group/boxLeft.vue" |
| | | import boxRight from "../group/boxRight.vue" |
| | | import articleListScorll from "../group/articleListScorll.vue" |
| | | import tool from "../group/tool.vue" |
| | | import MyModal from "../group/MyModal.vue" |
| | | |
| | | export default { |
| | | |
| | | components: { |
| | | tempFriendBox, |
| | | box10, |
| | | boxLeft, |
| | | boxRight, |
| | | articleListScorll, |
| | | tool, |
| | | MyModal, |
| | | }, |
| | | methods: { |
| | | getCalendarContainer(trigger) { |
| | | return this.$refs.myModal; |
| | | }, |
| | | showModal() { |
| | | this.visible = true; |
| | | }, |
| | | handleOk(e) { |
| | | console.log(this.$refs.modalBox.form); |
| | | var res = this.$refs.modalBox.$refs.myForm.validate(valid => { |
| | | if (valid) { |
| | | this.$message.info("校验通过") |
| | | } else { |
| | | this.$message.info("校验失败") |
| | | return false; |
| | | } |
| | | }); |
| | | |
| | | |
| | | if (!res) return; |
| | | |
| | | this.$message.info("提交表单") |
| | | |
| | | this.loading = true; |
| | | setTimeout(() => { |
| | | this.visible = false; |
| | | this.loading = false; |
| | | }, 3000); |
| | | }, |
| | | reset(e) { |
| | | var res = this.$refs.modalBox.$refs.myForm.resetFields() |
| | | }, |
| | | handleCancel(e) { |
| | | this.visible = false; |
| | | this.$refs.myModal.showModal(); |
| | | }, |
| | | afterVisibleChange(val) {}, |
| | | showDrawer1() { |
| | | this.visible1 = true; |
| | | }, |
| | | showDrawer2() { |
| | | this.visible2 = true; |
| | | }, |
| | | onClose1() { |
| | | this.visible1 = false; |
| | | }, |
| | | onClose2() { |
| | | this.visible2 = false; |
| | | }, |
| | | |
| | | }, |
| | | data() { |
| | | return { |
| | | loading: false, |
| | | visible: false, |
| | | visible1: false, |
| | | visible2: false, |
| | | colMini: { |
| | | xs: 1, |
| | | sm: 1, |
| | | md: 1, |
| | | lg: 0, |
| | | xl: 0, |
| | | xxl: 0 |
| | | }, |
| | | colApiLeft: { |
| | | xs: 0, |
| | | sm: 0, |
| | |
| | | xs: 0, |
| | | sm: 0, |
| | | md: 0, |
| | | lg: 0, |
| | | xl: { |
| | | span: 5, |
| | | offset: 1, |
| | | }, |
| | | xxl: { |
| | | span: 4, |
| | | offset: 1, |
| | | }, |
| | | lg: 1, |
| | | xl: 1, |
| | | xxl: 1, |
| | | }, |
| | | colApiMain: { |
| | | xs: 24, |
| | |
| | | offset: 2, |
| | | }, |
| | | md: { |
| | | span: 14, |
| | | span: 15, |
| | | offset: 1, |
| | | }, |
| | | lg: { |
| | |
| | | offset: 2, |
| | | }, |
| | | xl: { |
| | | span: 9, |
| | | offset: 1, |
| | | span: 13, |
| | | offset: 2, |
| | | }, |
| | | xxl: { |
| | | span: 8, |
| | | offset: 1, |
| | | span: 11, |
| | | offset: 2, |
| | | }, |
| | | } |
| | | |
| | |
| | | min-height: 780px; |
| | | } |
| | | |
| | | .article-detail { |
| | | max-height: 750px; |
| | | overflow: overlay; |
| | | } |
| | | |
| | | .blog-main { |
| | | margin-top: 80px; |
| | |
| | | import box1 from '../components/mini/box1-info.vue' |
| | | import tagTime from '../components/mini/tagTime.vue' |
| | | import tagInfo from '../components/mini/tagInfo.vue' |
| | | import boxFriend from '../components/mini/box-friend.vue' |
| | | import mdDetail from '../components/mini/mdDetail.vue' |
| | | |
| | | |
| | |
| | | { |
| | | path: '/mdDetail', |
| | | component: mdDetail, |
| | | }, { |
| | | path: '/main4', |
| | | component: boxFriend, |
| | | } |
| | | ] |
| | | }, |
| | |
| | | /*实例化路由*/ |
| | | const router = new Router({ |
| | | mode: "history", //模式修改 |
| | | routes: asyncRouterMap |
| | | routes: asyncRouterMap, |
| | | scrollBehavior (to, from, savedPosition) { |
| | | |
| | | //路由切换是否滚动到顶部 |
| | | if (savedPosition) { |
| | | return savedPosition |
| | | } else { |
| | | return { x: 0, y: 0 } |
| | | } |
| | | } |
| | | }) |
| | | |
| | | router.beforeEach((to, from, next) => { |