<template>
|
<div id="app" @scroll="handleScroll">
|
<router-view />
|
</div>
|
</template>
|
<script>
|
export default {
|
created() {
|
const w = window.innerWidth;
|
const h = window.innerHeight;
|
},
|
data() {
|
return {
|
scrollTop: 0,
|
isTopFixed: false,
|
};
|
},
|
|
watch: {
|
scrollTop(val) {
|
this.isTopFixed = val > 90 ? true : false;
|
},
|
},
|
methods: {
|
handleScroll(e) {
|
this.scrollTop = e.target.scrollTop;
|
},
|
},
|
};
|
</script>
|
<style src="./assets/css/common.scss" lang="scss"></style>
|
<style src="./assets/css/overried.scss" lang="scss"></style>
|
<style src="./assets/css/table-page.scss" lang="scss"></style>
|
<style lang="scss">
|
html,
|
body {
|
width: 100%;
|
height: 100%;
|
}
|
#app {
|
width: 100%;
|
height: 100%;
|
background: #f0f2f5;
|
font-family: "Avenir", Helvetica, Arial, sans-serif;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
color: #2c3e50;
|
overflow-x: hidden;
|
overflow-y: visible;
|
transition: all 200ms;
|
&:hover {
|
overflow-x: auto;
|
}
|
// .el-button--primary:hover,
|
// .el-button--primary:focus {
|
// background: #2249b4;
|
// border-color: #2249b4;
|
// }
|
|
.el-button--warning:hover,
|
.el-button--warning:focus {
|
background: #fd780b;
|
border-color: #fd780b;
|
}
|
|
.el-button--danger:hover,
|
.el-button--danger:focus {
|
background: #d22929;
|
border-color: #d22929;
|
}
|
|
.el-button--info {
|
color: #222222;
|
}
|
.el-button--info:hover,
|
.el-button--info:focus {
|
background: rgb(190, 190, 190);
|
border-color: rgb(190, 190, 190);
|
}
|
|
.el-tag.el-tag--info {
|
background-color: #f4f4f5;
|
border-color: #e9e9eb;
|
color: #909399;
|
}
|
}
|
|
/* reset */
|
html {
|
color: #3d3d3d;
|
background: #fff;
|
}
|
body,
|
div,
|
dl,
|
dt,
|
dd,
|
ul,
|
ol,
|
li,
|
h1,
|
h2,
|
h3,
|
h4,
|
h5,
|
h6,
|
input,
|
button,
|
textarea,
|
p,
|
blockquote,
|
th,
|
td {
|
margin: 0;
|
padding: 0;
|
}
|
body {
|
font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
|
}
|
img {
|
border: none;
|
}
|
em,
|
strong {
|
font-style: normal;
|
font-weight: normal;
|
}
|
li {
|
list-style: none;
|
}
|
table {
|
border-collapse: collapse;
|
border-spacing: 0;
|
}
|
h1 {
|
font-size: 18px;
|
}
|
h2 {
|
font-size: 16px;
|
}
|
h3 {
|
font-size: 14px;
|
}
|
h4,
|
h5,
|
h6 {
|
font-size: 100%;
|
}
|
q:before,
|
q:after {
|
content: "";
|
} /* 消除q前后的内容 */
|
button,
|
input,
|
select,
|
textarea {
|
font-size: 100%;
|
} /* 使得表单元素在 ie 下能继承字体大小 */
|
input,
|
button,
|
textarea,
|
select,
|
optgroup,
|
option {
|
font-family: inherit;
|
font-size: inherit;
|
font-style: inherit;
|
font-weight: inherit;
|
}
|
address,
|
cite,
|
dfn,
|
em,
|
var {
|
font-style: normal;
|
} /* 将斜体扶正 */
|
/* link */
|
a {
|
color: #3d68e1;
|
text-decoration: none;
|
}
|
a:hover {
|
color: #ea1e24;
|
text-decoration: underline;
|
}
|
.fade-enter-active,
|
.fade-leave-active {
|
transition: opacity 0.5s;
|
}
|
.fade-enter,
|
.fade-leave-active {
|
opacity: 0;
|
}
|
|
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
|
::-webkit-scrollbar {
|
width: 6px;
|
height: 6px;
|
background-color: #f5f5f5;
|
}
|
|
/*定义滚动条轨道 内阴影+圆角*/
|
::-webkit-scrollbar-track {
|
box-shadow: inset 0 0 3px rgba(122, 120, 120, 0.3);
|
border-radius: 5px;
|
background-color: #fff;
|
}
|
|
/*定义滑块 内阴影+圆角*/
|
::-webkit-scrollbar-thumb {
|
border-radius: 5px;
|
box-shadow: inset 0 0 3px rgba(245, 243, 243, 0.3);
|
background-color: rgba(160, 158, 158, 0.8);
|
}
|
.fade-enter-active,
|
.fade-leave-active {
|
transition: opacity 0.5s;
|
}
|
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
|
opacity: 0;
|
}
|
.window {
|
z-index: 10 !important;
|
}
|
.el-card__body {
|
box-sizing: border-box;
|
}
|
|
.is-dark {
|
background: #00000090 !important;
|
}
|
// .popper__arrow {
|
// border-bottom-color: #00000090;
|
// }
|
// .popper__arrow:after {
|
// // border-top-color: #00000090 !important;
|
// border-bottom-color: #00000090 !important;
|
// }
|
.el-tooltip__popper {
|
border-radius: 0px;
|
padding: 5px 10px;
|
}
|
|
.atooltip.el-tooltip__popper[x-placement^="bottom"] .popper__arrow {
|
border-bottom-color: #20202090;
|
}
|
.atooltip.el-tooltip__popper[x-placement^="bottom"] .popper__arrow:after {
|
border-bottom-color: #68666690;
|
}
|
.atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow {
|
border-top-color: #20202090;
|
}
|
.atooltip.el-tooltip__popper[x-placement^="top"] .popper__arrow:after {
|
border-top-color: #68666690;
|
}
|
.atooltip.el-tooltip__popper[x-placement^="left"] .popper__arrow {
|
border-left-color: #20202090;
|
}
|
.atooltip.el-tooltip__popper[x-placement^="left"] .popper__arrow:after {
|
border-left-color: #68666690;
|
}
|
.atooltip.el-tooltip__popper[x-placement^="right"] .popper__arrow {
|
border-right-color: #20202090;
|
}
|
.atooltip.el-tooltip__popper[x-placement^="right"] .popper__arrow:after {
|
border-right-color: #68666690;
|
}
|
|
.el-menu-vertical-demo {
|
overflow-y: hidden;
|
overflow-x: hidden;
|
}
|
.el-menu-vertical-demo::-webkit-scrollbar {
|
/*滚动条整体样式*/
|
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/
|
height: 4px;
|
}
|
.el-menu-vertical-demo::-webkit-scrollbar-thumb {
|
/*滚动条里面小方块*/
|
border-radius: 5px;
|
-webkit-box-shadow: inset 0 0 5px rgba(157, 165, 183, 0);
|
background: rgb(202, 201, 201);
|
}
|
.el-menu-vertical-demo::-webkit-scrollbar-track {
|
/*滚动条里面轨道*/
|
-webkit-box-shadow: inset 0 0 5px rgba(157, 165, 183, 0);
|
border-radius: 0;
|
background: rgb(255, 255, 255);
|
}
|
.el-menu-vertical-demo::-webkit-scrollbar-thumb:hover {
|
background: rgba(0, 0, 0, 0.4);
|
}
|
.el-menu-vertical-demo:hover {
|
overflow-y: visible;
|
overflow-x: hidden;
|
}
|
|
.el-dropdown-menu__item:focus,
|
.el-dropdown-menu__item:not(.is-disabled):hover {
|
background: rgba(61, 104, 225, 0.5);
|
color: #fff;
|
}
|
|
// 控制下拉菜单显示6个
|
.el-dropdown-menu {
|
border-radius: 0px;
|
max-height: 205px;
|
overflow: auto;
|
}
|
|
.el-range-editor.el-input__inner {
|
border-radius: 2px;
|
}
|
|
.btn-icon {
|
cursor: pointer;
|
}
|
|
.btn-icon:hover {
|
filter: drop-shadow(0 0 0 #fff);
|
opacity: 0.8;
|
}
|
.link-btn {
|
//background: #ff7300 !important;
|
//color: #fff !important;
|
&.is-disabled {
|
// background-color: #fff !important;
|
// color: #ccc !important;
|
}
|
a {
|
color: #fff;
|
}
|
a:hover {
|
color: #fff;
|
text-decoration: none;
|
}
|
}
|
.right-content {
|
// border-top:1px solid #eee;
|
// overflow: auto;
|
flex: 1;
|
overflow-x: auto;
|
display: flex;
|
flex-direction: column;
|
}
|
.changePwdDialog .el-dialog {
|
width: 500px;
|
//height: 308px;
|
.el-dialog__header {
|
padding-top: 30px;
|
text-align: center;
|
.el-dialog__title {
|
height: 22px;
|
font-size: 16px;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: bold;
|
color: #111111;
|
line-height: 22px;
|
}
|
}
|
.el-dialog__body {
|
padding-top: 10px;
|
}
|
.btns {
|
text-align: center;
|
.el-button {
|
width: 100px;
|
height: 36px;
|
padding: 0;
|
}
|
}
|
.el-input {
|
width: 360px;
|
height: 40px;
|
}
|
}
|
.logout-dialog .el-dialog {
|
width: 360px;
|
}
|
.el-dropdown-menu.cart-dmenu {
|
border-radius: 0;
|
padding: 0;
|
max-height: none;
|
overflow: hidden;
|
.window {
|
width: 400px;
|
//height: 310px;
|
.list {
|
padding: 0 20px;
|
max-height: 250px;
|
overflow-y: auto;
|
.orderDetail {
|
display: flex;
|
justify-content: space-between;
|
height: 44px;
|
line-height: 44px;
|
box-sizing: border-box;
|
border-bottom: 1px solid #eee;
|
&:hover {
|
background: rgba(238, 238, 238, 0.5);
|
}
|
.name {
|
font-size: 14px;
|
color: #555;
|
font-family: PingFangSC-Regular, PingFang SC;
|
}
|
.priceAndNum {
|
color: #555;
|
font-size: 14px;
|
}
|
}
|
}
|
.bot {
|
padding: 10px 20px;
|
overflow: hidden;
|
box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.06);
|
.sum {
|
float: left;
|
font-size: 20px;
|
font-weight: 500;
|
line-height: 40px;
|
}
|
.btn {
|
float: right;
|
.link-btn {
|
border-radius: 0;
|
border: none;
|
width: 156px;
|
height: 40px;
|
}
|
}
|
}
|
}
|
}
|
.el-dropdown-menu.user-drop-menu {
|
width: 136px !important;
|
//height: 155px !important;
|
text-align: center;
|
font-size: 14px;
|
color: #666;
|
margin: 0;
|
font-family: PingFangSC-Regular, PingFang SC;
|
&:focus {
|
color: #d21a20;
|
}
|
}
|
.el-popper.user-drop-menu {
|
margin-top: 0 !important;
|
}
|
.common-dialog {
|
.el-dialog {
|
margin: 0 auto !important;
|
top: 50%;
|
transform: translateY(-50%);
|
.el-dialog__header {
|
padding-top: 30px;
|
text-align: center;
|
.el-dialog__title {
|
height: 22px;
|
font-size: 16px;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: bold;
|
color: #111111;
|
line-height: 22px;
|
}
|
}
|
.el-dialog__body {
|
padding-top: 10px;
|
.words {
|
height: 20px;
|
font-size: 14px;
|
font-family: PingFangSC-Regular, PingFang SC;
|
color: #555555;
|
line-height: 20px;
|
text-align: center;
|
margin-bottom: 40px;
|
margin-top: -10px;
|
}
|
.btns {
|
text-align: center;
|
.el-button {
|
width: 100px;
|
height: 36px;
|
padding: 0;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
