From 8ec9c517c58b70918f2d72f2bfa6ab4b0a4145f9 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Fri, 19 Aug 2022 18:03:39 +0800
Subject: [PATCH] 局部细节调整
---
src/App.vue | 105 +++++++++++++++++++++++++++++-----------------------
1 files changed, 58 insertions(+), 47 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 1dc48a2..421793e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,77 +1,88 @@
<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">
+ #app {
+ // overflow: auto;
+ // border: none;
}
-
- #app,body,html {
- height: 100%;
- }
-
- .scrollbar {
+
+ /* .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