Commit 15cd83e4 authored by “yiyousong”'s avatar “yiyousong”

pref:修改页面

parent b3f894c7
/* 颜色 */ /* 颜色 */
.primary{ .primary {
color:#1890FF; color: #1890ff;
} }
.delete{ .delete {
color:#FA4D4C; color: #fa4d4c;
} }
.green{ .green {
color:#1BBC9B; color: #1bbc9b;
} }
.edit{ .edit {
color:#03d76f !important; color: #03d76f !important;
} }
.clofff{ .clofff {
color:#fff; color: #fff;
} }
.bgdel{ .bgdel {
background-color: #FA4D4C; background-color: #fa4d4c;
} }
.bgpr{ .bgpr {
background-color: #1890FF; background-color: #1890ff;
} }
.bgg{ .bgg {
background-color:#1BBC9B; background-color: #1bbc9b;
} }
.bgw{ .bgw {
background-color: #fff; background-color: #fff;
} }
.h-full {
height: 100%;
}
.w-full {
width: 100%;
}
/* 版心 */ /* 版心 */
.container{ .container {
width:1200px; width: 1200px;
} }
/* 弹性布局 */ /* 弹性布局 */
.flex{ .flex {
display: flex; display: flex;
} }
.flex1{ .flex1 {
flex:1 flex: 1;
} }
.flexc{ .flexc {
flex-direction: column; flex-direction: column;
} }
.flexwrap{ .flexwrap {
flex-wrap: wrap; flex-wrap: wrap;
} }
.jcc{ .jcc {
justify-content: center; justify-content: center;
} }
.jca{ .jca {
justify-content: space-around; justify-content: space-around;
} }
.jcb{ .jcb {
justify-content: space-between; justify-content: space-between;
} }
.jce{ .jce {
justify-content: space-evenly; justify-content: space-evenly;
} }
.jc-start{ .jc-start {
justify-content: flex-start; justify-content: flex-start;
} }
.jc-end{ .jc-end {
justify-content: flex-end; justify-content: flex-end;
} }
.aic{ .aic {
align-items: center; align-items: center;
} }
.aca{ .aca {
align-content: space-around; align-content: space-around;
} }
.acb{ .acb {
align-content: space-between; align-content: space-between;
} }
.ace{ .ace {
align-content: space-evenly; align-content: space-evenly;
} }
/* margin */ /* margin */
.m10{ .m10 {
margin:10px margin: 10px;
} }
.m15{ .m15 {
margin:15px; margin: 15px;
} }
.m20{ .m20 {
margin:20px; margin: 20px;
} }
.mt10{ .mt10 {
margin-top:10px; margin-top: 10px;
} }
.mt15{ .mt15 {
margin-top:15px; margin-top: 15px;
} }
.mt20{ .mt20 {
margin-top:20px; margin-top: 20px;
} }
.ml10{ .ml10 {
margin-left:10px; margin-left: 10px;
} }
.ml15{ .ml15 {
margin-left:15px; margin-left: 15px;
} }
.ml20{ .ml20 {
margin-left:20px; margin-left: 20px;
} }
.ml25{ .ml25 {
margin-left:25px; margin-left: 25px;
} }
.mr5 { .mr5 {
margin-right: 5px; margin-right: 5px;
}
.mr10{
margin-right:10px;
} }
.mr15{ .mr8 {
margin-right:15px; margin-right: 8px;
}
.mr10 {
margin-right: 10px;
}
.mr15 {
margin-right: 15px;
} }
.mr20{ .mr20 {
margin-right:20px; margin-right: 20px;
} }
.mr25{ .mr25 {
margin-right:25px; margin-right: 25px;
} }
.mb10{ .mb10 {
margin-bottom:10px; margin-bottom: 10px;
} }
.mb15{ .mb15 {
margin-bottom:15px; margin-bottom: 15px;
} }
.mb20{ .mb20 {
margin-bottom:20px; margin-bottom: 20px;
} }
.mb25{ .mb25 {
margin-bottom:25px; margin-bottom: 25px;
} }
/* padding */ /* padding */
.pd10{ .pd10 {
padding:10px; padding: 10px;
} }
.pd15{ .pd15 {
padding:15px; padding: 15px;
} }
.pd20{ .pd20 {
padding:20px; padding: 20px;
} }
.pdt10{ .pdt10 {
padding-top:10px; padding-top: 10px;
} }
.pdt15{ .pdt15 {
padding-top:15px; padding-top: 15px;
} }
.pdt20{ .pdt20 {
padding-top:20px; padding-top: 20px;
} }
.pdt30{ .pdt30 {
padding-top:30px; padding-top: 30px;
} }
.pdl10{ .pdl10 {
padding-left:10px; padding-left: 10px;
} }
.pdl15{ .pdl15 {
padding-left:15px; padding-left: 15px;
} }
.pdl20{ .pdl20 {
padding-left:20px; padding-left: 20px;
} }
.pdr6{ .pdr6 {
padding-right:6px; padding-right: 6px;
} }
.pdr10{ .pdr10 {
padding-right:10px; padding-right: 10px;
} }
.pdr15{ .pdr15 {
padding-right:15px; padding-right: 15px;
} }
.pdr20{ .pdr20 {
padding-right:20px; padding-right: 20px;
} }
.pdb10{ .pdb10 {
padding-bottom:10px; padding-bottom: 10px;
} }
.pdb15{ .pdb15 {
padding-bottom:15px; padding-bottom: 15px;
} }
.pdb20{ .pdb20 {
padding-bottom:20px; padding-bottom: 20px;
} }
/* 字体大小 */ /* 字体大小 */
.font16{ .font16 {
font-size:16px; font-size: 16px;
} }
.font18{ .font18 {
font-size:18px; font-size: 18px;
} }
.font20{ .font20 {
font-size:20px; font-size: 20px;
} }
.font22{ .font22 {
font-size:22px; font-size: 22px;
} }
.font24{ .font24 {
font-size:24px; font-size: 24px;
} }
.font26{ .font26 {
font-size:26px; font-size: 26px;
} }
.font28{ .font28 {
font-size:28px; font-size: 28px;
} }
.font30{ .font30 {
font-size:30px; font-size: 30px;
} }
/* 字体位置 */ /* 字体位置 */
.tac{ .tac {
text-align: center; text-align: center;
} }
.tal{ .tal {
text-align: left; text-align: left;
} }
.tar{ .tar {
text-align: right; text-align: right;
} }
/* 加粗 */ /* 加粗 */
.fontw600{ .fontw600 {
font-weight:600; font-weight: 600;
} }
.fontw700{ .fontw700 {
font-weight:700; font-weight: 700;
} }
.fontw800{ .fontw800 {
font-weight:800; font-weight: 800;
} }
.skin-box { .skin-box {
...@@ -235,15 +244,15 @@ ...@@ -235,15 +244,15 @@
.empty { .empty {
height: 100%; height: 100%;
} }
.pointer{ .pointer {
cursor: pointer; cursor: pointer;
} }
.auto-scroll-y{ .auto-scroll-y {
overflow-y: auto; overflow-y: auto;
} }
.auto-scroll-x{ .auto-scroll-x {
overflow-y: auto; overflow-y: auto;
} }
.auto-scroll{ .auto-scroll {
overflow: auto; overflow: auto;
} }
<template> <template>
<div class="tab-header flex jcb aic"> <div class="tab-header flex jcb aic">
<div> <div class="h-full flex aic">
<a-icon :type="icon" class="mr5 primary" /> <a-icon :type="icon" class="mr8 primary" />
<span class="label">{{ label }}</span> <span class="label">{{ label }}</span>
</div> </div>
<div> <div>
......
<template> <template>
<div class="left-menu"> <div class="left-menu flex flexc">
<div class="search-box"> <div class="search-box">
<a-input-search <a-input-search
placeholder="请输入设备关键字搜索" placeholder="请输入设备关键字搜索"
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
@search="onSearch" @search="onSearch"
/> />
</div> </div>
<div class="menu"> <div class="menu flex1 auto-scroll-y">
<a-card-grid <a-card-grid
:class="{ active: i === isActive }" :class="{ active: i === isActive }"
v-for="(v, i) in productList" v-for="(v, i) in productList"
...@@ -41,7 +41,9 @@ export default { ...@@ -41,7 +41,9 @@ export default {
async getProductList(search = {}) { async getProductList(search = {}) {
let res = await getProductList({ page: 1, size: -1, ...search }); let res = await getProductList({ page: 1, size: -1, ...search });
let { data } = res.data.data; let { data } = res.data.data;
this.productList = data; this.productList = data.filter(
(v) => !v.productName.includes("电子门牌")
);
this.changeMenu(0, this.productList[0]); this.changeMenu(0, this.productList[0]);
}, },
// 搜索 // 搜索
...@@ -70,12 +72,12 @@ export default { ...@@ -70,12 +72,12 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.left-menu { .left-menu {
height: 100%; height: 100%;
background-color: #fff;
} }
.search-box { .search-box {
padding: 15px 15px 0px; padding: 15px 15px 0px;
} }
.menu { .menu {
height: 70vh;
margin-top: 15px; margin-top: 15px;
overflow-y: auto; overflow-y: auto;
padding: 0px 15px 15px 15px; padding: 0px 15px 15px 15px;
......
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
</a-select> </a-select>
</div> </div>
<a-spin size="small" :spinning="spinning"> <a-spin size="small" :spinning="spinning">
<div class="preview-list"> <div ref="previewList" class="preview-list">
<div v-if="previewList.length > 0"> <div v-if="previewList.length > 0">
<div <div
class="preview-item" class="preview-item"
...@@ -64,6 +64,7 @@ export default { ...@@ -64,6 +64,7 @@ export default {
}, },
watch: { watch: {
curProduct(newVal) { curProduct(newVal) {
this.$refs.previewList.scrollTop = 0;
if (Object.keys(newVal).length) { if (Object.keys(newVal).length) {
this.getSkinList({ productId: newVal.productId }); this.getSkinList({ productId: newVal.productId });
} }
...@@ -156,22 +157,25 @@ export default { ...@@ -156,22 +157,25 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.right-preview { .right-preview {
height: 100%; height: 100%;
width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 15px 0px; padding-top: 15px;
background-color: #fff;
.preview-seach { .preview-seach {
height: 32px; height: 32px;
padding: 0px 15px; padding: 0px 15px;
margin-bottom: 15px; margin-bottom: 15px;
flex-shrink: 0;
} }
.preview-list { .preview-list {
height: 65vh; height: 65vh;
padding: 0px 15px; padding: 0px 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// border-bottom: 1px solid #ccc;
overflow-y: auto; overflow-y: auto;
// border-bottom: 1px solid #ccc;
.preview-item { .preview-item {
margin-bottom: 6px; margin-bottom: 6px;
height: 120px; height: 120px;
...@@ -188,10 +192,12 @@ export default { ...@@ -188,10 +192,12 @@ export default {
} }
} }
.preview-btn { .preview-btn {
border-top: 1px solid #ccc;
height: 100px; height: 100px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
flex-shrink: 0;
} }
} }
</style> </style>
\ No newline at end of file
...@@ -166,26 +166,16 @@ export default { ...@@ -166,26 +166,16 @@ export default {
.show { .show {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 20px 0px;
background-image: linear-gradient(#cfe9ff, #fff); background-image: linear-gradient(#cfe9ff, #fff);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background: rgba(144, 147, 153, 0.5);
}
&::-webkit-scrollbar-track {
box-shadow: 0;
border-radius: 0px;
background: #f0f2f5;
}
.show-content { .show-content {
width: 100%; width: 100%;
height: 75vh; height: 75vh;
overflow-y: auto;
.show-header { .show-header {
text-align: center; text-align: center;
color: #48866c; color: #48866c;
......
...@@ -11,8 +11,6 @@ export default {}; ...@@ -11,8 +11,6 @@ export default {};
<style lang="less" scoped> <style lang="less" scoped>
.index { .index {
width: 100%; width: 100%;
min-height: 100%; height: 100%;
background-color: #fff;
display: flex;
} }
</style> </style>
\ No newline at end of file
<template> <template>
<div class="surface"> <div class="surface flex flexc">
<div class="container">
<TabHeader label="皮肤管理"> <TabHeader label="皮肤管理">
<a-space> <a-space>
<a-button v-permission="[1]" icon="plus" @click="addDev" <a-button v-permission="[1]" icon="plus" @click="addDev"
...@@ -14,7 +13,7 @@ ...@@ -14,7 +13,7 @@
> >
</a-space> </a-space>
</TabHeader> </TabHeader>
<div class="main"> <div class="main flex1">
<div class="menu-box"> <div class="menu-box">
<LeftMenu <LeftMenu
ref="LeftMenu" ref="LeftMenu"
...@@ -51,7 +50,6 @@ ...@@ -51,7 +50,6 @@
<!-- 新增设备 --> <!-- 新增设备 -->
<AddDev :visible.sync="addDevVisible" @addDev="addDevSuccess"></AddDev> <AddDev :visible.sync="addDevVisible" @addDev="addDevSuccess"></AddDev>
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -140,17 +138,11 @@ export default { ...@@ -140,17 +138,11 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
.surface { .surface {
width: 100%;
height: 100%;
.container {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;
}
.main { .main {
height: 100%; height: 100%;
border-top: 1px solid rgb(224, 224, 224);
background-color: #fff;
display: flex; display: flex;
.menu-box { .menu-box {
width: 20%; width: 20%;
...@@ -158,19 +150,12 @@ export default { ...@@ -158,19 +150,12 @@ export default {
} }
.show-box { .show-box {
width: 65%; width: 65%;
height: 100%;
} }
.preview-box { .preview-box {
width: 15%; width: 15%;
height: 100%;
} }
} }
} }
/deep/.ant-card {
height: 100%;
display: flex;
flex-direction: column;
}
/deep/.ant-card-body {
flex: 1;
padding: 0px;
}
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment