SpaceOfCheng
/
admin
Beobachten 3
Favorisieren 0
Fork 0
Code Issues 0 Pull-Requests 0 Releases 2 Aktivität
Quellcode durchsuchen

ytj

yuantianjiao vor 6 Jahren
Ursprung
dfabdc80ab e690e50455
Commit
4d33b42f85
17 geänderte Dateien mit 1442 neuen und 83 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 2
    1
      .eslintrc.js
  2. 2
    1
      index.html
  3. 767
    2
      package-lock.json
  4. 1
    0
      package.json
  5. 3
    6
      src/App.vue
  6. 35
    0
      src/components/breadCrumb/index.vue
  7. 37
    0
      src/components/breadCrumb/page.scss
  8. 57
    0
      src/components/siderBar/index.vue
  9. 0
    0
      src/components/siderBar/page.scss
  10. 4
    1
      src/main.js
  11. 40
    5
      src/pages/login/index.vue
  12. 0
    30
      src/pages/login/page.css
  13. 117
    0
      src/pages/login/page.scss
  14. 104
    4
      src/pages/system/index.vue
  15. 0
    33
      src/pages/system/page.css
  16. 110
    0
      src/pages/system/page.scss
  17. 163
    0
      src/style/main.css

+ 2
- 1
.eslintrc.js Datei anzeigen 

@@ -24,6 +24,7 @@ module.exports = {
24 24 
     // allow async-await
25 25 
     'generator-star-spacing': 'off',
26 26 
     // allow debugger during development
27 
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
27 
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
28 
+    'comma-dangle': 0
28 29 
   }
29 30 
 }

+ 2
- 1
index.html Datei anzeigen 

@@ -3,7 +3,8 @@
3 3 
   <head>
4 4 
     <meta charset="utf-8">
5 5 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
6 
-    <title>admin</title>
6 
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_775069_lqx0smsce7.css">
7 
+    <title>城的空间后台管理系统</title>
7 8 
   </head>
8 9 
   <body>
9 10 
     <div id="app"></div>

+ 767
- 2
package-lock.json
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


+ 1
- 0
package.json Datei anzeigen 

@@ -17,6 +17,7 @@
17 17 
     "axios": "^0.18.0",
18 18 
     "element-ui": "^2.4.5",
19 19 
     "vue": "^2.5.2",
20 
+    "vue-cookie": "^1.1.4",
20 21 
     "vue-router": "^3.0.1"
21 22 
   },
22 23 
   "devDependencies": {

+ 3
- 6
src/App.vue Datei anzeigen 

@@ -12,11 +12,8 @@ export default {
12 12
13 13 
 <style>
14 14 
 #app {
15 
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
16 
-  -webkit-font-smoothing: antialiased;
17 
-  -moz-osx-font-smoothing: grayscale;
18 
-  text-align: center;
19 
-  color: #2c3e50;
20 
-  margin-top: 60px;
15 
+  width: 100%;
16 
+  height: 100%;
17 
+  position: relative;
21 18 
 }
22 19 
 </style>

+ 35
- 0
src/components/breadCrumb/index.vue Datei anzeigen 

@@ -0,0 +1,35 @@
1 
+<template>
2 
+  <div class="breadCrumb flex-h">
3 
+    <span>当前页面路径：</span>
4 
+    <el-breadcrumb separator="/">
5 
+      <el-breadcrumb-item v-for="(item,index) in list" :key="index">
6 
+        <router-link :to="{name:item.pathName,query:{}}">{{item.title}}</router-link>
7 
+      </el-breadcrumb-item>
8 
+    </el-breadcrumb>
9 
+  </div>
10 
+</template>
11 
+
12 
+<script>
13 
+export default {
14 
+  name: '',
15 
+  props: ['list'],
16 
+  data () {
17 
+    return {
18 
+
19 
+    }
20 
+  },
21 
+  mounted () {
22 
+    this.$nextTick(function () {
23 
+
24 
+    })
25 
+  },
26 
+  methods: {
27 
+
28 
+  }
29 
+}
30 
+</script>
31 
+
32 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
33 
+<style lang="scss" scoped>
34 
+@import "page.scss";
35 
+</style>

+ 37
- 0
src/components/breadCrumb/page.scss Datei anzeigen 

@@ -0,0 +1,37 @@
1 
+
2 
+.breadCrumb{
3 
+  align-items: center;
4 
+
5 
+  &>span{
6 
+    font-size: 13px;
7 
+    margin: 0 0 0 10px;
8 
+    line-height: 40px;
9 
+  }
10 
+}
11 
+
12 
+
13 
+
14 
+
15 
+
16 
+
17 
+
18 
+
19 
+
20 
+
21 
+
22 
+
23 
+
24 
+
25 
+
26 
+
27 
+
28 
+
29 
+
30 
+
31 
+
32 
+
33 
+
34 
+
35 
+
36 
+
37 
+

+ 57
- 0
src/components/siderBar/index.vue Datei anzeigen 

@@ -0,0 +1,57 @@
1 
+<template>
2 
+  <div class="siderBar">
3 
+    <el-row class="tac">
4 
+      <el-col>
5 
+        <el-menu
6 
+          default-active="2"
7 
+          class="el-menu-vertical-demo"
8 
+          @open="handleOpen"
9 
+          @close="handleClose">
10 
+          <template v-for="(item,index) in menu">
11 
+            <el-submenu v-if="item.children.length" :index="String(index)" :key="index">
12 
+              <template slot="title">
13 
+                <span>{{item.title}}</span>
14 
+              </template>
15 
+              <el-menu-item-group>
16 
+                <el-menu-item v-for="(subItem,subIndex) in item.children" :key="subIndex" :index="String(index)+'-'+String(subIndex)">{{subItem.title}}</el-menu-item>
17 
+              </el-menu-item-group>
18 
+            </el-submenu>
19 
+            <el-menu-item v-else :index="String(index)" :key="index">
20 
+              <span slot="title">{{item.title}}</span>
21 
+            </el-menu-item>
22 
+          </template>
23 
+        </el-menu>
24 
+      </el-col>
25 
+    </el-row>
26 
+  </div>
27 
+</template>
28 
+
29 
+<script>
30 
+export default {
31 
+  name: '',
32 
+  props: ['menu'],
33 
+  data () {
34 
+    return {
35 
+
36 
+    }
37 
+  },
38 
+  mounted () {
39 
+    this.$nextTick(function () {
40 
+      console.log(this.menu)
41 
+    })
42 
+  },
43 
+  methods: {
44 
+    handleOpen (key, keyPath) {
45 
+      console.log(key, keyPath)
46 
+    },
47 
+    handleClose (key, keyPath) {
48 
+      console.log(key, keyPath)
49 
+    }
50 
+  }
51 
+}
52 
+</script>
53 
+
54 
+<!-- Add "scoped" attribute to limit CSS to this component only -->
55 
+<style lang="scss" scoped>
56 
+@import "page.scss";
57 
+</style>

+ 0
- 0
src/components/siderBar/page.scss Datei anzeigen


+ 4
- 1
src/main.js Datei anzeigen 

@@ -3,11 +3,14 @@
3 3 
 import Vue from 'vue'
4 4 
 import App from './App'
5 5 
 import ElementUI from 'element-ui'
6 
-import 'element-ui/lib/theme-chalk/index.css'
6 
+import Cookies from 'vue-cookie'
7 
+import './style/main.css'
7 8 
 import router from './router'
8 9 
 import Ajax from './util/ajax'
9 10 
 import api from './util/api'
10 11 
 Vue.use(ElementUI)
12 
+Vue.use(Cookies)
13 
+
11 14 
 Vue.config.productionTip = false
12 15 
 Vue.prototype.$api = api
13 16 
 Vue.prototype.$ajax = Ajax

+ 40
- 5
src/pages/login/index.vue Datei anzeigen 

@@ -1,5 +1,23 @@
1 1 
 <template>
2 
-  <div class="mainPage"></div>
2 
+  <div class="mainPage">
3 
+    <div class="centerLabel">
4 
+      <div class="top">
5 
+        <i class="iconfont icon-yinchenglogo"></i>
6 
+        <span>城的空间 · 登录</span>
7 
+      </div>
8 
+      <div class="login">
9 
+        <input type="text" placeholder="请输入账号">
10 
+        <input type="password" placeholder="请输入密码">
11 
+        <div>
12 
+          <label :class="{'active':remberAccount}" @click="triggerRember">
13 
+            <i class="iconfont icon-gouxuan"></i>
14 
+            <span onselectstart="return false">记住账号密码</span>
15 
+          </label>
16 
+        </div>
17 
+        <a class="btn">登 录</a>
18 
+      </div>
19 
+    </div>
20 
+  </div>
3 21 
 </template>
4 22
5 23 
 <script>
 
@@ -7,14 +25,31 @@ export default {
7 25 
   name: '',
8 26 
   data () {
9 27 
     return {
10 
-
28 
+      remberAccount: true, // 记住账号密码
11 29 
     }
12 30 
   },
13 
-  methods: {}
31 
+  mounted () {
32 
+    this.$nextTick(function () {
33 
+      this.initLogin()
34 
+    })
35 
+  },
36 
+  methods: {
37 
+    // 初始化登陆逻辑
38 
+    initLogin () {
39 
+      if (this.$cookie.get('accountInfo') === undefined || this.$cookie.get('accountInfo') === '') {
40 
+
41 
+      }
42 
+    },
43 
+
44 
+    // 切换记住账号密码状态
45 
+    triggerRember () {
46 
+      this.remberAccount = !this.remberAccount
47 
+    },
48 
+  },
14 49 
 }
15 50 
 </script>
16 51
17 52 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
18 
-<style scoped>
19 
-@import "page.css";
53 
+<style lang="scss" scoped>
54 
+@import "page.scss";
20 55 
 </style>

+ 0
- 30
src/pages/login/page.css Datei anzeigen 

@@ -1,30 +0,0 @@
1 
-
2 
-
3 
-
4 
-
5 
-
6 
-
7 
-
8 
-
9 
-
10 
-
11 
-
12 
-
13 
-
14 
-
15 
-
16 
-
17 
-
18 
-
19 
-
20 
-
21 
-
22 
-
23 
-
24 
-
25 
-
26 
-
27 
-
28 
-
29 
-
30 
-

+ 117
- 0
src/pages/login/page.scss Datei anzeigen 

@@ -0,0 +1,117 @@
1 
+
2 
+.mainPage{
3 
+  div.centerLabel{
4 
+    width: 360px;
5 
+    position: relative;
6 
+    overflow: hidden;
7 
+    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .1);
8 
+    border-radius: 5px;
9 
+  }
10 
+  .top{
11 
+    text-align: center;
12 
+    padding: 10px 0;
13 
+    border-bottom: 1px solid #eee;
14 
+    margin-bottom: 10px;
15 
+    *{
16 
+      vertical-align: middle;
17 
+    }
18 
+    i{
19 
+      font-size: 30px;
20 
+      color: red;
21 
+    }
22 
+  }
23 
+  .login{
24 
+    width: calc(100% - 40px);
25 
+    margin: 0 auto;
26 
+    position: relative;
27 
+    overflow: hidden;
28 
+    input{
29 
+      width: 100%;
30 
+      box-sizing: border-box;
31 
+      border: 1px solid #ccc;
32 
+      line-height: 20px;
33 
+      padding: 5px 0;
34 
+      border-radius: 5px;
35 
+      font-size: 13px;
36 
+      text-indent: 10px;
37 
+      margin: 15px auto 0;
38 
+    }
39 
+    div{
40 
+      font-size: 0;
41 
+      white-space: nowrap;
42 
+      padding: 5px 0;
43 
+      margin-top: 5px;
44 
+      &>*{
45 
+        font-size: 0;
46 
+        white-space: nowrap;
47 
+        &>*{
48 
+          display: inline-block;
49 
+          vertical-align: middle;
50 
+          font-size: 13px;
51 
+          line-height: 20px;
52 
+          margin-right: 5px;
53 
+        }
54 
+        i{
55 
+          font-size: 16px;
56 
+          color: #666;
57 
+        }
58 
+      }
59 
+      &>*.active{
60 
+        i{
61 
+          color: red;
62 
+        }
63 
+      }
64 
+      &>*:hover{
65 
+        cursor: pointer;
66 
+      }
67 
+      span{
68 
+
69 
+      }
70 
+    }
71 
+  }
72 
+  .btn{
73 
+    width: 100%;
74 
+    display: block;
75 
+    margin: 10px auto 30px;
76 
+    line-height: 40px;
77 
+    background: red;
78 
+    text-align: center;
79 
+    font-size: 13px;
80 
+    color: #fff;
81 
+    border-radius: 5px;
82 
+    transition: all .1s linear;
83 
+    -webkit-transition: all .1s linear;
84 
+  }
85 
+  .btn:hover{
86 
+    background: #d01414;
87 
+  }
88 
+}
89 
+
90 
+
91 
+
92 
+
93 
+
94 
+
95 
+
96 
+
97 
+
98 
+
99 
+
100 
+
101 
+
102 
+
103 
+
104 
+
105 
+
106 
+
107 
+
108 
+
109 
+
110 
+
111 
+
112 
+
113 
+
114 
+
115 
+
116 
+
117 
+

+ 104
- 4
src/pages/system/index.vue Datei anzeigen 

@@ -1,19 +1,119 @@
1 1 
 <template>
2 
-  <div class="mainPage"></div>
2 
+  <div class="mainPage flex-v">
3 
+    <div class="system-header flex-h">
4 
+      <i class="iconfont icon-yinchenglogo"></i>
5 
+      <span>银城-城的空间</span>
6 
+      <div class="flex-item flex-h">
7 
+        <div class="flex-item"></div>
8 
+        <span class="characterMark">用户角色</span>
9 
+        <a class="userIcon"></a>
10 
+      </div>
11 
+    </div>
12 
+    <div class="flex-item flex-h">
13 
+      <div class="system-siderBar">
14 
+        <siderBar :menu="pageMenu"></siderBar>
15 
+      </div>
16 
+      <div class="flex-item flex-v">
17 
+        <div class="system-breadcrumb">
18 
+          <breadCrumb :list="breadCrumb"></breadCrumb>
19 
+        </div>
20 
+        <div class="flex-item">
21 
+          <div>
22 
+            业务页面
23 
+          </div>
24 
+        </div>
25 
+      </div>
26 
+    </div>
27 
+  </div>
3 28 
 </template>
4 29
5 30 
 <script>
31 
+import breadCrumb from '@/components/breadCrumb/index'
32 
+import siderBar from '@/components/siderBar/index'
33 
+
6 34 
 export default {
7 35 
   name: '',
8 36 
   data () {
9 37 
     return {
10 
-
38 
+      breadCrumb: [{
39 
+        title: '导航1',
40 
+        pathName: ''
41 
+      }, {
42 
+        title: '导航2',
43 
+        pathName: ''
44 
+      }, {
45 
+        title: '导航3',
46 
+        pathName: ''
47 
+      }, {
48 
+        title: '导航4',
49 
+        pathName: ''
50 
+      }, {
51 
+        title: '导航5',
52 
+        pathName: ''
53 
+      }],
54 
+      pageMenu: [{
55 
+        title: '一级菜单1',
56 
+        pathName: '',
57 
+        children: [{
58 
+          title: '二级菜单1',
59 
+          pathName: '',
60 
+          children: [],
61 
+        }, {
62 
+          title: '二级菜单2',
63 
+          pathName: '',
64 
+          children: [],
65 
+        }, {
66 
+          title: '二级菜单3',
67 
+          pathName: '',
68 
+          children: [],
69 
+        }],
70 
+      }, {
71 
+        title: '一级菜单2',
72 
+        pathName: '',
73 
+        children: [{
74 
+          title: '二级菜单1',
75 
+          pathName: '',
76 
+          children: [],
77 
+        }, {
78 
+          title: '二级菜单2',
79 
+          pathName: '',
80 
+          children: [],
81 
+        }, {
82 
+          title: '二级菜单3',
83 
+          pathName: '',
84 
+          children: [],
85 
+        }],
86 
+      }, {
87 
+        title: '一级菜单3',
88 
+        pathName: '',
89 
+        children: [{
90 
+          title: '二级菜单1',
91 
+          pathName: '',
92 
+          children: [],
93 
+        }, {
94 
+          title: '二级菜单2',
95 
+          pathName: '',
96 
+          children: [],
97 
+        }, {
98 
+          title: '二级菜单3',
99 
+          pathName: '',
100 
+          children: [],
101 
+        }],
102 
+      }, {
103 
+        title: '一级菜单4',
104 
+        pathName: '',
105 
+        children: [],
106 
+      }]
11 107 
     }
108 
+  },
109 
+  components: {
110 
+    breadCrumb,
111 
+    siderBar,
12 112 
   }
13 113 
 }
14 114 
 </script>
15 115
16 116 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
17 
-<style scoped>
18 
-@import 'page.css';
117 
+<style lang="scss" scoped>
118 
+@import "page.scss";
19 119 
 </style>

+ 0
- 33
src/pages/system/page.css Datei anzeigen 

@@ -1,33 +0,0 @@
1 
-
2 
-
3 
-
4 
-
5 
-
6 
-
7 
-
8 
-
9 
-
10 
-
11 
-
12 
-
13 
-
14 
-
15 
-
16 
-
17 
-
18 
-
19 
-
20 
-
21 
-
22 
-
23 
-
24 
-
25 
-
26 
-
27 
-
28 
-
29 
-
30 
-
31 
-
32 
-
33 
-

+ 110
- 0
src/pages/system/page.scss Datei anzeigen 

@@ -0,0 +1,110 @@
1 
+
2 
+
3 
+
4 
+.system-header{
5 
+
6 
+  background: #fff;
7 
+  position: relative;
8 
+  align-items: center;
9 
+  box-shadow: 0 0 10px 2px rgba(0, 0, 0, .05);
10 
+  z-index: 101;
11 
+
12 
+  &>span,
13 
+  &>i{
14 
+    display: inline-block;
15 
+  }
16 
+
17 
+  i.icon-yinchenglogo{
18 
+    font-size: 50px;
19 
+    color: red;
20 
+    margin-left: 10px;
21 
+    padding: 5px 0;
22 
+  }
23 
+
24 
+  &>span{
25 
+    font-size: 18px;
26 
+    margin-left: 5px;
27 
+    position: relative;
28 
+    overflow: visible;
29 
+    padding-right: 20px;
30 
+  }
31 
+
32 
+  &>span::after{
33 
+    content: '';
34 
+    width: 1px;
35 
+    height: 20px;
36 
+    background: #ccc;
37 
+    position: absolute;
38 
+    right: 0;
39 
+    top: 50%;
40 
+    transform: translateY(-50%);
41 
+    -webkit-transform: translateY(-50%);
42 
+  }
43 
+
44 
+  div.flex-h{
45 
+    align-items: center;
46 
+  }
47 
+
48 
+  .characterMark{
49 
+    font-size: 13px;
50 
+    color: #666;
51 
+  }
52 
+
53 
+  .userIcon{
54 
+    width: 40px;
55 
+    height: 40px;
56 
+    position: relative;
57 
+    overflow: hidden;
58 
+    border-radius: 100%;
59 
+    background: #eee;
60 
+    margin: 0 20px 0 10px;
61 
+  }
62 
+
63 
+}
64 
+
65 
+.system-siderBar{
66 
+  width: 200px;
67 
+  background: #fff;
68 
+  position: relative;
69 
+  z-index: 100;
70 
+  overflow-y: auto;
71 
+  box-shadow: 0 0 10px 2px rgba(0, 0, 0, .05);
72 
+}
73 
+
74 
+.system-breadcrumb{
75 
+  position: relative;
76 
+  overflow: hidden;
77 
+  background: #fff;
78 
+  z-index: 99;
79 
+  border-bottom: 1px solid #eee;
80 
+}
81 
+
82 
+
83 
+
84 
+
85 
+
86 
+
87 
+
88 
+
89 
+
90 
+
91 
+
92 
+
93 
+
94 
+
95 
+
96 
+
97 
+
98 
+
99 
+
100 
+
101 
+
102 
+
103 
+
104 
+
105 
+
106 
+
107 
+
108 
+
109 
+
110 
+

+ 163
- 0
src/style/main.css Datei anzeigen 

@@ -0,0 +1,163 @@
1 
+@charset "utf-8";
2 
+html,
3 
+body {
4 
+  width: 100%;
5 
+  height: 100%;
6 
+  -webkit-text-size-adjust: 100%;
7 
+  position: relative;
8 
+  color: #333;
9 
+  overflow-x: hidden;
10 
+  font-size: 13px;
11 
+  background: #fff;
12 
+}
13 
+* {
14 
+  margin: 0;
15 
+  padding: 0;
16 
+  font-family: '微软雅黑';
17 
+  -webkit-tap-highlight-color: rgba(255, 0, 0, 0);
18 
+  -webkit-font-smoothing: antialiased;
19 
+}
20 
+body * {
21 
+  font-size: 13px;
22 
+}
23 
+a {
24 
+  text-decoration: none;
25 
+}
26 
+a:hover {
27 
+  cursor: pointer;
28 
+}
29 
+em {
30 
+  font-style: normal;
31 
+}
32 
+li {
33 
+  list-style: none;
34 
+}
35 
+img {
36 
+  border: 0;
37 
+  vertical-align: middle;
38 
+}
39 
+table {
40 
+  border-collapse: collapse;
41 
+  border-spacing: 0;
42 
+}
43 
+p {
44 
+  word-wrap: break-word;
45 
+}
46 
+b {
47 
+  font-weight: normal;
48 
+}
49 
+input,
50 
+textarea {
51 
+  border: 0;
52 
+  -webkit-appearance: none;
53 
+}
54 
+input[type='input'] {
55 
+  -webkit-appearance: none;
56 
+}
57 
+input[type='checkbox'] {
58 
+  -webkit-appearance: checkbox;
59 
+}
60 
+.text-overflow-ellipsis {
61 
+  overflow: hidden;
62 
+  white-space: nowrap;
63 
+  text-overflow: ellipsis;
64 
+}
65 
+.centerLabel {
66 
+  display: block;
67 
+  position: absolute;
68 
+  left: 50%;
69 
+  top: 50%;
70 
+  transform: translate(-50%, -50%);
71 
+  -webkit-transform: translate(-50%, -50%);
72 
+}
73 
+.flex-h {
74 
+  display: flex;
75 
+  display: -webkit-flex;
76 
+}
77 
+.flex-v {
78 
+  display: flex;
79 
+  display: -webkit-flex;
80 
+  flex-direction: column;
81 
+  -webkit-flex-direction: column;
82 
+}
83 
+.flex-item {
84 
+  flex: 1;
85 
+  -webkit-flex: 1;
86 
+  position: relative;
87 
+  overflow: hidden;
88 
+}
89 
+*[class*='text-overflowEllipsis-line'] {
90 
+  overflow: hidden;
91 
+  text-overflow: ellipsis;
92 
+  display: -webkit-box;
93 
+  -webkit-box-orient: vertical;
94 
+}
95 
+.text-overflowEllipsis-line2 {
96 
+  -webkit-line-clamp: 2;
97 
+}
98 
+.text-overflowEllipsis-line3 {
99 
+  -webkit-line-clamp: 3;
100 
+}
101 
+.text-overflowEllipsis-line4 {
102 
+  -webkit-line-clamp: 4;
103 
+}
104 
+*[class*='overflow-scroll-y'] {
105 
+  overflow-x: hidden;
106 
+  overflow-y: scroll;
107 
+  -webkit-overflow-scrolling: touch;
108 
+}
109 
+*[class*='overflow-scroll-x'] {
110 
+  overflow-y: hidden;
111 
+  overflow-x: scroll;
112 
+  -webkit-overflow-scrolling: touch;
113 
+}
114 
+.overflow-scroll-y-3d,
115 
+.overflow-scroll-x-3d {
116 
+  transform: translateZ(0);
117 
+  -webkit-transform: translateZ(0);
118 
+}
119 
+.overflow-scroll-x::-webkit-scrollbar,
120 
+.overflow-scroll-x-3d::-webkit-scrollbar {
121 
+  width: 0;
122 
+  height: 0;
123 
+  color: transparent;
124 
+  display: none;
125 
+}
126 
+input:focus,
127 
+textarea:focus,
128 
+select:focus {
129 
+  outline: none;
130 
+}
131 
+
132 
+.mainPage {
133 
+  width: 100%;
134 
+  height: 100%;
135 
+  position: relative;
136 
+  overflow: hidden;
137 
+}
138 
+
139 
+* > img.cover {
140 
+  width: 100%;
141 
+  height: 100%;
142 
+  object-fit: cover;
143 
+}
144 
+
145 
+* > img.contain {
146 
+  width: 100%;
147 
+  height: 100%;
148 
+  object-fit: contain;
149 
+}
150 
+
151 
+::-webkit-scrollbar {
152 
+  width: 8px;
153 
+  height: 4px;
154 
+}
155 
+
156 
+::-webkit-scrollbar-track {
157 
+  background: transparent;
158 
+}
159 
+
160 
+::-webkit-scrollbar-thumb {
161 
+  border-radius: 5px;
162 
+  background: rgba(0, 0, 0, 0.3);
163 
+}