18231669351
/
reagent_manage
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

node-sass替换为sass

Browse Source 
移除了popper 2.x，只保留popper 1.x
其他一些小改
master
toesbieya 6 years ago
parent 8954fe89c0
commit 347b610ae8
18 changed files with 223 additions and 961 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 787
      vue/package-lock.json
  2. 3
      vue/package.json
  3. 19
      vue/src/assets/styles/variables.scss
  4. 4
      vue/src/components/ContextMenu/index.vue
  5. 4
      vue/src/components/RegionSelector/Tab/index.vue
  6. 110
      vue/src/components/Skeleton/QSkeleton.sass
  7. 140
      vue/src/components/Skeleton/QSkeleton.scss
  8. 2
      vue/src/components/Skeleton/index.vue
  9. 3
      vue/src/config/index.js
  10. 2
      vue/src/directive/ripple/main.js
  11. 29
      vue/src/directive/ripple/style.sass
  12. 37
      vue/src/directive/ripple/style.scss
  13. 10
      vue/src/layout/components/Sidebar/index.vue
  14. 26
      vue/src/layout/components/Sidebar/style.scss
  15. 4
      vue/src/layout/components/TagsView/index.vue
  16. 0
      vue/src/layout/components/TagsView/style.scss
  17. 4
      vue/src/views/app/login/index.vue
  18. 0
      vue/src/views/app/login/style.scss

787
vue/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
vue/package.json
Unescape View File

@ -8,7 +8,6 @@
"svgo": "svgo -f src/assets/icons/svg --config=src/assets/icons/svgo.yml" "svgo": "svgo -f src/assets/icons/svg --config=src/assets/icons/svgo.yml"
}, },
"dependencies": { "dependencies": {
"@popperjs/core": "^2.4.1",
"axios": "^0.19.2", "axios": "^0.19.2",
"core-js": "^3.6.5", "core-js": "^3.6.5",
"decimal.js": "^10.2.0", "decimal.js": "^10.2.0",
@ -36,7 +35,7 @@
"@vue/cli-service": "^4.4.1", "@vue/cli-service": "^4.4.1",
"compression-webpack-plugin": "^3.1.0", "compression-webpack-plugin": "^3.1.0",
"html-webpack-plugin": "^4.3.0", "html-webpack-plugin": "^4.3.0",
"node-sass": "^4.14.1", "sass": "^1.26.8",
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
"script-ext-html-webpack-plugin": "^2.1.4", "script-ext-html-webpack-plugin": "^2.1.4",
"script-loader": "^0.7.2", "script-loader": "^0.7.2",

19
vue/src/assets/styles/variables.scss
Unescape View File

@ -37,15 +37,15 @@ $--color-info: $--color-teal;
} }
// sidebar // sidebar
//$menuText: #bfcbd9; $menu-text-color: #D6E2F0;
$menuText: #D6E2F0; $menu-active-text-color: $--color-primary;
$menuBg: #304156; $menu-background: #304156;
$menuHover: #263445; $menu-hover: #263445;
$subMenuBg: #1f2d3d; $sub-menu-background: #1f2d3d;
$subMenuHover: #001528; $sub-menu-hover: #001528;
//侧边栏宽度 //侧边栏宽度
$sideBarWidth: 210px; $side-bar-width: 210px;
//头部导航栏高度 //头部导航栏高度
$navHeight: 50px; $navHeight: 50px;
//头部多页签栏高度 //头部多页签栏高度
@ -60,8 +60,9 @@ $--font-path: '~element-ui/lib/theme-chalk/fonts';
// the :export directive is the magic sauce for webpack // the :export directive is the magic sauce for webpack
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass // https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
:export { :export {
menuText: $menuText; menu-text-color: $menu-text-color;
menuBg: $menuBg; menu-active-text-color: $menu-active-text-color;
menu-background: $menu-background;
primary: $--color-primary; primary: $--color-primary;
info: $--color-info; info: $--color-info;
success: $--color-success; success: $--color-success;

4
vue/src/components/ContextMenu/index.vue
Unescape View File

@ -72,7 +72,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
.contextmenu { .contextmenu {
margin: 0; margin: 0;
background: $menuBg; background: $menu-background;
z-index: 10; z-index: 10;
position: absolute; position: absolute;
list-style-type: none; list-style-type: none;
@ -89,7 +89,7 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: $menuHover; background: $menu-hover;
color: $--color-primary; color: $--color-primary;
} }
} }

4
vue/src/components/RegionSelector/Tab/index.vue
Unescape View File

@ -258,6 +258,4 @@
} }
</script> </script>
<style lang="scss"> <style lang="scss" src="./style.scss"></style>
@import "./style.scss";
</style>

110
vue/src/components/Skeleton/QSkeleton.sass
Unescape View File

@ -1,110 +0,0 @@
.q-skeleton
background: rgba(0, 0, 0, .12)
border-radius: 4px
/*
maintain size even with border
for types that have height specified
*/
box-sizing: border-box
&:before
content: '\00a0'
&--type
&-circle
height: 48px
width: 48px
border-radius: 50%
&--bordered
border: 1px solid rgba(0, 0, 0, .05)
&--square
border-radius: 0
&--anim-fade
animation: q-skeleton--fade 1.5s linear .5s infinite
&--anim-pulse
animation: q-skeleton--pulse 1.5s ease-in-out .5s infinite
&--anim-pulse-x
animation: q-skeleton--pulse-x 1.5s ease-in-out .5s infinite
&--anim-pulse-y
animation: q-skeleton--pulse-y 1.5s ease-in-out .5s infinite
&--anim-wave,
&--anim-blink,
&--anim-pop
position: relative
overflow: hidden
z-index: 1
&:after
content: ''
position: absolute
top: 0
right: 0
bottom: 0
left: 0
z-index: 0
&--anim-blink:after
background: rgba(255, 255, 255, .7)
animation: q-skeleton--fade 1.5s linear .5s infinite
&--anim-wave:after
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent)
animation: q-skeleton--wave 1.5s linear .5s infinite
&--dark
background: rgba(255, 255, 255, 0.05)
&.q-skeleton--bordered
border: 1px solid rgba(255, 255, 255, .25)
&.q-skeleton--anim-wave:after
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent)
&.q-skeleton--anim-blink:after
background: rgba(255, 255, 255, .2)
@keyframes q-skeleton--fade
0%
opacity: 1
50%
opacity: .4
100%
opacity: 1
@keyframes q-skeleton--pulse
0%
transform: scale(1)
50%
transform: scale(.85)
100%
transform: scale(1)
@keyframes q-skeleton--pulse-x
0%
transform: scaleX(1)
50%
transform: scaleX(.75)
100%
transform: scaleX(1)
@keyframes q-skeleton--pulse-y
0%
transform: scaleY(1)
50%
transform: scaleY(.75)
100%
transform: scaleY(1)
@keyframes q-skeleton--wave
0%
transform: translateX(-100%)
100%
transform: translateX(100%)

140
vue/src/components/Skeleton/QSkeleton.scss
Unescape View File

@ -0,0 +1,140 @@
.q-skeleton {
background: rgba(0, 0, 0, .12);
border-radius: 4px;
box-sizing: border-box;
&::before {
content: '\00a0'
}
&--type-circle {
height: 48px;
width: 48px;
border-radius: 50%;
}
&--bordered {
border: 1px solid rgba(0, 0, 0, .05)
}
&--square {
border-radius: 0;
}
&--anim-fade {
animation: q-skeleton--fade 1.5s linear .5s infinite
}
&--anim-pulse {
animation: q-skeleton--pulse 1.5s ease-in-out .5s infinite
}
&--anim-pulse-x {
animation: q-skeleton--pulse-x 1.5s ease-in-out .5s infinite
}
&--anim-pulse-y {
animation: q-skeleton--pulse-y 1.5s ease-in-out .5s infinite
}
&--anim-wave,
&--anim-blink,
&--anim-pop {
position: relative;
overflow: hidden;
z-index: 1;
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
}
&--anim-blink:after {
background: rgba(255, 255, 255, .7);
animation: q-skeleton--fade 1.5s linear .5s infinite
}
&--anim-wave:after {
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
animation: q-skeleton--wave 1.5s linear .5s infinite
}
&--dark {
background: rgba(255, 255, 255, 0.05);
&.q-skeleton--bordered {
border: 1px solid rgba(255, 255, 255, .25)
}
&.q-skeleton--anim-wave:after {
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1), transparent)
}
&.q-skeleton--anim-blink:after {
background: rgba(255, 255, 255, .2)
}
}
}
@keyframes q-skeleton--fade {
0% {
opacity: 1
}
50% {
opacity: .4
}
100% {
opacity: 1
}
}
@keyframes q-skeleton--pulse {
0% {
transform: scale(1)
}
50% {
transform: scale(.85)
}
100% {
transform: scale(1)
}
}
@keyframes q-skeleton--pulse-x {
0% {
transform: scaleX(1)
}
50% {
transform: scaleX(.75)
}
100% {
transform: scaleX(1)
}
}
@keyframes q-skeleton--pulse-y {
0% {
transform: scaleY(1)
}
50% {
transform: scaleY(.75)
}
100% {
transform: scaleY(1)
}
}
@keyframes q-skeleton--wave {
0% {
transform: translateX(-100%)
}
100% {
transform: translateX(100%)
}
}

2
vue/src/components/Skeleton/index.vue
Unescape View File

@ -44,4 +44,4 @@
} }
</script> </script>
<style lang="sass" src="./QSkeleton.sass"></style> <style lang="scss" src="./QSkeleton.scss"></style>

3
vue/src/config/index.js
Unescape View File

@ -8,8 +8,7 @@ module.exports = {
routerMode: 'history', routerMode: 'history',
//socket连接地址 //socket连接地址
//socketUrl: 'wss://toesbieya.cn', socketUrl: process.env.NODE_ENV === 'development' ? 'localhost:12580' : 'wss://toesbieya.cn',
socketUrl: 'localhost:12580',
sidebarLogoUrl: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png', sidebarLogoUrl: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png',

2
vue/src/directive/ripple/main.js
Unescape View File

@ -1,5 +1,5 @@
//从quasar处搬运 https://quasar.dev/vue-directives/material-ripple //从quasar处搬运 https://quasar.dev/vue-directives/material-ripple
import './style.sass' import './style.scss'
let lastKeyCompositionStatus = false let lastKeyCompositionStatus = false

29
vue/src/directive/ripple/style.sass
Unescape View File

@ -1,29 +0,0 @@
.q-ripple
position: absolute
top: 0
left: 0
width: 100%
height: 100%
color: inherit
border-radius: inherit
z-index: 0
pointer-events: none
overflow: hidden
contain: strict
&__inner
position: absolute
top: 0
left: 0
opacity: 0
color: inherit
border-radius: 50%
background: currentColor
pointer-events: none
will-change: transform, opacity
&--enter
transition: transform .225s cubic-bezier(.4, 0, .2, 1), opacity .1s cubic-bezier(.4, 0, .2, 1)
&--leave
transition: opacity .25s cubic-bezier(.4, 0, .2, 1)

37
vue/src/directive/ripple/style.scss
Unescape View File

@ -0,0 +1,37 @@
.q-ripple {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: inherit;
border-radius: inherit;
z-index: 0;
pointer-events: none;
overflow: hidden;
contain: strict;
&__inner {
position: absolute;
top: 0;
left: 0;
opacity: 0;
color: inherit;
border-radius: 50%;
background: currentColor;
pointer-events: none;
will-change: transform, opacity;
&--enter {
transition: transform .225s cubic-bezier(.4, 0, .2, 1), opacity .1s cubic-bezier(.4, 0, .2, 1)
}
&--leave {
transition: opacity .25s cubic-bezier(.4, 0, .2, 1)
}
}
}

10
vue/src/layout/components/Sidebar/index.vue
Unescape View File

@ -96,9 +96,9 @@
const menu = ( const menu = (
<el-menu <el-menu
ref="menu" ref="menu"
active-text-color={variables['primary']} text-color={variables['menu-text-color']}
background-color={variables['menuBg']} active-text-color={variables['menu-active-text-color']}
text-color={variables['menuText']} background-color={variables['menu-background']}
collapse={this.collapse} collapse={this.collapse}
collapse-transition={false} collapse-transition={false}
default-active={this.$route.path} default-active={this.$route.path}
@ -131,6 +131,4 @@
} }
</script> </script>
<style lang="scss"> <style lang="scss" src="./style.scss"></style>
@import "~@/assets/styles/sidebar";
</style>

26
vue/src/assets/styles/sidebar.scss → vue/src/layout/components/Sidebar/style.scss
Unescape View File

@ -3,15 +3,14 @@ $iconSize: 17px;
.sidebar-container { .sidebar-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: $sideBarWidth; width: $side-bar-width;
background-color: $menuBg; background-color: $menu-background;
font-size: 0; font-size: 0;
overflow: hidden;
flex-shrink: 0; flex-shrink: 0;
transition: all .3s; height: 100vh;
top: 0;
bottom: 0;
z-index: 10; z-index: 10;
box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
transition: all 0.2s ease-in-out;
//移动端时为fixed //移动端时为fixed
&.mobile { &.mobile {
@ -31,7 +30,7 @@ $iconSize: 17px;
&.hide-sidebar { &.hide-sidebar {
width: 0; width: 0;
pointer-events: none; pointer-events: none;
transform: translateX(-$sideBarWidth); transform: translateX(-$side-bar-width);
} }
.sidebar-logo-container { .sidebar-logo-container {
@ -83,6 +82,7 @@ $iconSize: 17px;
} }
} }
//子级菜单激活时，父级同样高亮
.is-active > .el-submenu__title { .is-active > .el-submenu__title {
color: $--color-primary !important; color: $--color-primary !important;
} }
@ -91,16 +91,16 @@ $iconSize: 17px;
.submenu-title-noDropdown, .submenu-title-noDropdown,
.el-submenu__title { .el-submenu__title {
&:hover { &:hover {
background-color: $menuHover !important; background-color: $menu-hover !important;
} }
} }
.nest-menu > .el-submenu__title, .nest-menu > .el-submenu__title,
.el-submenu .el-menu-item { .el-submenu .el-menu-item {
background-color: $subMenuBg !important; background-color: $sub-menu-background !important;
&:hover { &:hover {
background-color: $subMenuHover !important; background-color: $sub-menu-hover !important;
} }
} }
} }
@ -136,11 +136,11 @@ $iconSize: 17px;
.popover-menu__title { .popover-menu__title {
cursor: auto; cursor: auto;
text-align: center; text-align: center;
color: $menuText; color: $menu-text-color;
border-bottom: 1px solid $subMenuBg; border-bottom: 1px solid $sub-menu-background;
&.el-menu-item:hover { &.el-menu-item:hover {
background-color: $menuBg; background-color: $menu-background;
} }
} }
} }

4
vue/src/layout/components/TagsView/index.vue
Unescape View File

@ -172,6 +172,4 @@
} }
</script> </script>
<style lang="scss"> <style lang="scss" src="./style.scss"></style>
@import "~@/assets/styles/tagsView.scss";
</style>

0
vue/src/assets/styles/tagsView.scss → vue/src/layout/components/TagsView/style.scss
Unescape View File

4
vue/src/views/app/login/index.vue
Unescape View File

@ -64,6 +64,4 @@
} }
</script> </script>
<style lang="scss"> <style lang="scss" src="./style.scss"></style>
@import "src/assets/styles/login";
</style>

0
vue/src/assets/styles/login.scss → vue/src/views/app/login/style.scss
Unescape View File

Write Preview
Loading…
Cancel
Save