From c6793e5475b607e83cbb55b7d0ddfb9b81bd7774 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Thu, 25 Aug 2022 04:09:06 +0800 Subject: [PATCH] 日志内容详情页多媒体适配 markdown 内图片增加viewer相应 --- src/App.vue | 134 +++++++++++++++++++++++++++++--------------- 1 files changed, 88 insertions(+), 46 deletions(-) diff --git a/src/App.vue b/src/App.vue index 1dc48a2..4af3857 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,77 +1,119 @@ <template> - <div id="app" class="app app1"> - <!-- vue router - axios - less - vuex - vuels --> - <!-- <demo/> --> - <!-- <div id="nav"> - <router-link to="/">Home</router-link> - <router-link to="/about">About</router-link> - </div> - <router-view/> --> - - <!-- 将上传组件全局注册 --> - <!-- <global-uploader></global-uploader> --> - <pp></pp> + <div id="app" class="app"> + <router-view class=""></router-view> </div> </template> <script> - import globalUploader from '@/components/globalUploader.vue' - import HelloWorld from '@/components/HelloWorld.vue' - import demo from '@/components/demo.vue' - // import pp from '@/components/test1/parent1.vue' - import pp from '@/components/layouts/test.vue' - export default { - name: 'app', + components: {}, data() { return {} }, - components: { - globalUploader, - HelloWorld, - demo, - pp - - }, + components: {}, computed: {}, created() {}, watch: {}, + methods: {} } </script> -<style> - .app { - overflow: auto; - border: none; + + +<style lang="less"> + body { + background: #f0f2f5; } - - #app,body,html { - height: 100%; + + .ant-modal-header { + //ant 弹窗移动样式 + cursor: move; } - - .scrollbar { + + @font-face { + font-family: 'HYTangMeiRen'; + // font-display: swap; + src: url("http://t.inleft.com/share/z%E5%AD%97%E4%BD%93%E5%BA%93/hytmr55%E6%B1%89%E4%BB%AA%E5%94%90%E7%BE%8E%E4%BA%BA%E5%AD%97%E4%BD%93.woff") format("truetype"); + } + + span, + p, + a, + body, + h1, + h2, + h3, + h4, + h5, + h6, + code, + pre{ + font-family: HYTangMeiRen !important; + } + + #app { + // overflow: auto; + // border: none; + } + + /* .scrollbar { margin: 0 auto; - } - - .app1::-webkit-scrollbar { + } */ + ::-webkit-scrollbar { /*滚动条整体样式*/ - /*高宽分别对应横竖滚动条的尺寸*/ width: 8px; - height: 5px; + height: 8px; + /*高宽分别对应横竖滚动条的尺寸*/ } - .app1::-webkit-scrollbar-thumb { + ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 6px; background: #aaa; } - .app1::-webkit-scrollbar-track { + ::-webkit-scrollbar-track { /*滚动条里面轨道*/ border-radius: 8px; background: #FFFFFF; + margin-top: 20px; + margin-bottom: 20px; + } + + a { + position: relative; + } + + a:hover:after { + left: 0; + width: 100%; + -webkit-transition: width 350ms; + -moz-transition: width 350ms; + -ms-transition: width 350ms; + -o-transition: width 350ms; + transition: width 350ms; + } + + a:after { + position: absolute; + bottom: -0.0625rem; + left: 100%; + width: 0; + border-bottom: 0.0625rem solid #30a9de; + content: ""; + -webkit-transition: width 350ms, left 350ms; + -moz-transition: width 350ms, left 350ms; + -ms-transition: width 350ms, left 350ms; + -o-transition: width 350ms, left 350ms; + transition: width 350ms, left 350ms; + } + + .fade-enter-active, + .fade-leave-active { + transition: opacity .5s; + } + + .fade-enter, + .fade-leave-to { + opacity: 0; } </style> -- Gitblit v1.9.1