From 15cd83e4f98663b05e8094d4f4c4fa9220d852f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Cyiyousong=E2=80=9D?= <鈥測ousong_yi@foxmail.com鈥�>
Date: Fri, 11 Aug 2023 11:00:38 +0800
Subject: [PATCH] =?UTF-8?q?pref:=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../admin/src/assets/css/common.css | 327 +++++++++---------
.../admin/src/components/TabHeader.vue | 4 +-
.../basicset/surface/components/LeftMenu.vue | 10 +-
.../surface/components/RightPreview.vue | 14 +-
.../basicset/surface/components/ShowBox.vue | 16 +-
.../src/pages/basicset/surface/index.vue | 4 +-
.../src/pages/basicset/surface/surface.vue | 117 +++----
7 files changed, 241 insertions(+), 251 deletions(-)
diff --git a/base-manager-ui/admin/src/assets/css/common.css b/base-manager-ui/admin/src/assets/css/common.css
index 4bc9c0ff..ea28f686 100644
--- a/base-manager-ui/admin/src/assets/css/common.css
+++ b/base-manager-ui/admin/src/assets/css/common.css
@@ -1,249 +1,258 @@
/* 棰滆壊 */
-.primary{
- color:#1890FF;
+.primary {
+ color: #1890ff;
}
-.delete{
- color:#FA4D4C;
+.delete {
+ color: #fa4d4c;
}
-.green{
- color:#1BBC9B;
+.green {
+ color: #1bbc9b;
}
-.edit{
- color:#03d76f !important;
+.edit {
+ color: #03d76f !important;
}
-.clofff{
- color:#fff;
+.clofff {
+ color: #fff;
}
-.bgdel{
- background-color: #FA4D4C;
+.bgdel {
+ background-color: #fa4d4c;
}
-.bgpr{
- background-color: #1890FF;
+.bgpr {
+ background-color: #1890ff;
}
-.bgg{
- background-color:#1BBC9B;
+.bgg {
+ background-color: #1bbc9b;
+}
+.bgw {
+ background-color: #fff;
+}
+.h-full {
+ height: 100%;
+}
+.w-full {
+ width: 100%;
}
-.bgw{
- background-color: #fff;
- }
/* 鐗堝績 */
-.container{
- width:1200px;
+.container {
+ width: 1200px;
}
/* 寮规€у竷灞€ */
-.flex{
- display: flex;
+.flex {
+ display: flex;
}
-.flex1{
- flex:1
+.flex1 {
+ flex: 1;
}
-.flexc{
- flex-direction: column;
+.flexc {
+ flex-direction: column;
}
-.flexwrap{
- flex-wrap: wrap;
+.flexwrap {
+ flex-wrap: wrap;
}
-.jcc{
- justify-content: center;
+.jcc {
+ justify-content: center;
}
-.jca{
- justify-content: space-around;
+.jca {
+ justify-content: space-around;
}
-.jcb{
- justify-content: space-between;
+.jcb {
+ justify-content: space-between;
}
-.jce{
- justify-content: space-evenly;
+.jce {
+ justify-content: space-evenly;
}
-.jc-start{
- justify-content: flex-start;
+.jc-start {
+ justify-content: flex-start;
}
-.jc-end{
- justify-content: flex-end;
+.jc-end {
+ justify-content: flex-end;
}
-.aic{
- align-items: center;
+.aic {
+ align-items: center;
}
-.aca{
- align-content: space-around;
+.aca {
+ align-content: space-around;
}
-.acb{
- align-content: space-between;
+.acb {
+ align-content: space-between;
}
-.ace{
- align-content: space-evenly;
+.ace {
+ align-content: space-evenly;
}
/* margin */
-.m10{
- margin:10px
+.m10 {
+ margin: 10px;
}
-.m15{
- margin:15px;
+.m15 {
+ margin: 15px;
}
-.m20{
- margin:20px;
+.m20 {
+ margin: 20px;
}
-.mt10{
- margin-top:10px;
+.mt10 {
+ margin-top: 10px;
}
-.mt15{
- margin-top:15px;
+.mt15 {
+ margin-top: 15px;
}
-.mt20{
- margin-top:20px;
+.mt20 {
+ margin-top: 20px;
}
-.ml10{
- margin-left:10px;
+.ml10 {
+ margin-left: 10px;
}
-.ml15{
- margin-left:15px;
+.ml15 {
+ margin-left: 15px;
}
-.ml20{
- margin-left:20px;
+.ml20 {
+ margin-left: 20px;
}
-.ml25{
- margin-left:25px;
+.ml25 {
+ margin-left: 25px;
}
.mr5 {
- margin-right: 5px;
- }
-.mr10{
- margin-right:10px;
+ margin-right: 5px;
}
-.mr15{
- margin-right:15px;
+.mr8 {
+ margin-right: 8px;
}
-.mr20{
- margin-right:20px;
+.mr10 {
+ margin-right: 10px;
}
-.mr25{
- margin-right:25px;
+.mr15 {
+ margin-right: 15px;
}
-.mb10{
- margin-bottom:10px;
+.mr20 {
+ margin-right: 20px;
}
-.mb15{
- margin-bottom:15px;
+.mr25 {
+ margin-right: 25px;
}
-.mb20{
- margin-bottom:20px;
+.mb10 {
+ margin-bottom: 10px;
}
-.mb25{
- margin-bottom:25px;
+.mb15 {
+ margin-bottom: 15px;
+}
+.mb20 {
+ margin-bottom: 20px;
+}
+.mb25 {
+ margin-bottom: 25px;
}
/* padding */
-.pd10{
- padding:10px;
+.pd10 {
+ padding: 10px;
}
-.pd15{
- padding:15px;
+.pd15 {
+ padding: 15px;
}
-.pd20{
- padding:20px;
+.pd20 {
+ padding: 20px;
}
-.pdt10{
- padding-top:10px;
+.pdt10 {
+ padding-top: 10px;
}
-.pdt15{
- padding-top:15px;
+.pdt15 {
+ padding-top: 15px;
}
-.pdt20{
- padding-top:20px;
+.pdt20 {
+ padding-top: 20px;
}
-.pdt30{
- padding-top:30px;
+.pdt30 {
+ padding-top: 30px;
}
-.pdl10{
- padding-left:10px;
+.pdl10 {
+ padding-left: 10px;
}
-.pdl15{
- padding-left:15px;
+.pdl15 {
+ padding-left: 15px;
}
-.pdl20{
- padding-left:20px;
+.pdl20 {
+ padding-left: 20px;
}
-.pdr6{
- padding-right:6px;
+.pdr6 {
+ padding-right: 6px;
}
-.pdr10{
- padding-right:10px;
+.pdr10 {
+ padding-right: 10px;
}
-.pdr15{
- padding-right:15px;
+.pdr15 {
+ padding-right: 15px;
}
-.pdr20{
- padding-right:20px;
+.pdr20 {
+ padding-right: 20px;
}
-.pdb10{
- padding-bottom:10px;
+.pdb10 {
+ padding-bottom: 10px;
}
-.pdb15{
- padding-bottom:15px;
+.pdb15 {
+ padding-bottom: 15px;
}
-.pdb20{
- padding-bottom:20px;
+.pdb20 {
+ padding-bottom: 20px;
}
/* 瀛椾綋澶у皬 */
-.font16{
- font-size:16px;
+.font16 {
+ font-size: 16px;
}
-.font18{
- font-size:18px;
+.font18 {
+ font-size: 18px;
}
-.font20{
- font-size:20px;
+.font20 {
+ font-size: 20px;
}
-.font22{
- font-size:22px;
+.font22 {
+ font-size: 22px;
}
-.font24{
- font-size:24px;
+.font24 {
+ font-size: 24px;
}
-.font26{
- font-size:26px;
+.font26 {
+ font-size: 26px;
}
-.font28{
- font-size:28px;
+.font28 {
+ font-size: 28px;
}
-.font30{
- font-size:30px;
+.font30 {
+ font-size: 30px;
}
/* 瀛椾綋浣嶇疆 */
-.tac{
- text-align: center;
+.tac {
+ text-align: center;
}
-.tal{
- text-align: left;
+.tal {
+ text-align: left;
}
-.tar{
- text-align: right;
+.tar {
+ text-align: right;
}
/* 鍔犵矖 */
-.fontw600{
- font-weight:600;
+.fontw600 {
+ font-weight: 600;
}
-.fontw700{
- font-weight:700;
+.fontw700 {
+ font-weight: 700;
}
-.fontw800{
- font-weight:800;
+.fontw800 {
+ font-weight: 800;
}
.skin-box {
- height: 100%;
+ height: 100%;
}
.empty {
height: 100%;
}
-.pointer{
- cursor: pointer;
+.pointer {
+ cursor: pointer;
+}
+.auto-scroll-y {
+ overflow-y: auto;
}
-.auto-scroll-y{
- overflow-y: auto;
+.auto-scroll-x {
+ overflow-y: auto;
}
-.auto-scroll-x{
- overflow-y: auto;
+.auto-scroll {
+ overflow: auto;
}
-.auto-scroll{
- overflow: auto;
-}
\ No newline at end of file
diff --git a/base-manager-ui/admin/src/components/TabHeader.vue b/base-manager-ui/admin/src/components/TabHeader.vue
index a8745b71..d7c6b20b 100644
--- a/base-manager-ui/admin/src/components/TabHeader.vue
+++ b/base-manager-ui/admin/src/components/TabHeader.vue
@@ -1,7 +1,7 @@
<template>
<div class="tab-header flex jcb aic">
- <div>
- <a-icon :type="icon" class="mr5 primary" />
+ <div class="h-full flex aic">
+ <a-icon :type="icon" class="mr8 primary" />
<span class="label">{{ label }}</span>
</div>
<div>
diff --git a/base-manager-ui/admin/src/pages/basicset/surface/components/LeftMenu.vue b/base-manager-ui/admin/src/pages/basicset/surface/components/LeftMenu.vue
index 3740e864..7bc1d77e 100644
--- a/base-manager-ui/admin/src/pages/basicset/surface/components/LeftMenu.vue
+++ b/base-manager-ui/admin/src/pages/basicset/surface/components/LeftMenu.vue
@@ -1,5 +1,5 @@
<template>
- <div class="left-menu">
+ <div class="left-menu flex flexc">
<div class="search-box">
<a-input-search
placeholder="璇疯緭鍏ヨ澶囧叧閿瓧鎼滅储"
@@ -8,7 +8,7 @@
@search="onSearch"
/>
</div>
- <div class="menu">
+ <div class="menu flex1 auto-scroll-y">
<a-card-grid
:class="{ active: i === isActive }"
v-for="(v, i) in productList"
@@ -41,7 +41,9 @@ export default {
async getProductList(search = {}) {
let res = await getProductList({ page: 1, size: -1, ...search });
let { data } = res.data.data;
- this.productList = data;
+ this.productList = data.filter(
+ (v) => !v.productName.includes("鐢靛瓙闂ㄧ墝")
+ );
this.changeMenu(0, this.productList[0]);
},
// 鎼滅储
@@ -70,12 +72,12 @@ export default {
<style lang="less" scoped>
.left-menu {
height: 100%;
+ background-color: #fff;
}
.search-box {
padding: 15px 15px 0px;
}
.menu {
- height: 70vh;
margin-top: 15px;
overflow-y: auto;
padding: 0px 15px 15px 15px;
diff --git a/base-manager-ui/admin/src/pages/basicset/surface/components/RightPreview.vue b/base-manager-ui/admin/src/pages/basicset/surface/components/RightPreview.vue
index 3d433e99..97bc2f9d 100644
--- a/base-manager-ui/admin/src/pages/basicset/surface/components/RightPreview.vue
+++ b/base-manager-ui/admin/src/pages/basicset/surface/components/RightPreview.vue
@@ -13,7 +13,7 @@
</a-select>
</div>
<a-spin size="small" :spinning="spinning">
- <div class="preview-list">
+ <div ref="previewList" class="preview-list">
<div v-if="previewList.length > 0">
<div
class="preview-item"
@@ -64,6 +64,7 @@ export default {
},
watch: {
curProduct(newVal) {
+ this.$refs.previewList.scrollTop = 0;
if (Object.keys(newVal).length) {
this.getSkinList({ productId: newVal.productId });
}
@@ -156,22 +157,25 @@ export default {
<style lang="less" scoped>
.right-preview {
height: 100%;
+ width: 100%;
display: flex;
flex-direction: column;
- padding: 15px 0px;
-
+ padding-top: 15px;
+ background-color: #fff;
.preview-seach {
height: 32px;
padding: 0px 15px;
margin-bottom: 15px;
+ flex-shrink: 0;
}
.preview-list {
height: 65vh;
padding: 0px 15px;
display: flex;
flex-direction: column;
- // border-bottom: 1px solid #ccc;
overflow-y: auto;
+
+ // border-bottom: 1px solid #ccc;
.preview-item {
margin-bottom: 6px;
height: 120px;
@@ -188,10 +192,12 @@ export default {
}
}
.preview-btn {
+ border-top: 1px solid #ccc;
height: 100px;
display: flex;
flex-direction: column;
justify-content: center;
+ flex-shrink: 0;
}
}
</style>
\ No newline at end of file
diff --git a/base-manager-ui/admin/src/pages/basicset/surface/components/ShowBox.vue b/base-manager-ui/admin/src/pages/basicset/surface/components/ShowBox.vue
index 1bccb173..7c0eaeb5 100644
--- a/base-manager-ui/admin/src/pages/basicset/surface/components/ShowBox.vue
+++ b/base-manager-ui/admin/src/pages/basicset/surface/components/ShowBox.vue
@@ -166,26 +166,16 @@ export default {
.show {
width: 100%;
height: 100%;
+ padding: 20px 0px;
background-image: linear-gradient(#cfe9ff, #fff);
display: flex;
flex-direction: column;
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 {
width: 100%;
height: 75vh;
+ overflow-y: auto;
+
.show-header {
text-align: center;
color: #48866c;
diff --git a/base-manager-ui/admin/src/pages/basicset/surface/index.vue b/base-manager-ui/admin/src/pages/basicset/surface/index.vue
index 95611224..8438389a 100644
--- a/base-manager-ui/admin/src/pages/basicset/surface/index.vue
+++ b/base-manager-ui/admin/src/pages/basicset/surface/index.vue
@@ -11,8 +11,6 @@ export default {};
<style lang="less" scoped>
.index {
width: 100%;
- min-height: 100%;
- background-color: #fff;
- display: flex;
+ height: 100%;
}
</style>
\ No newline at end of file
diff --git a/base-manager-ui/admin/src/pages/basicset/surface/surface.vue b/base-manager-ui/admin/src/pages/basicset/surface/surface.vue
index ce511f68..f874d187 100644
--- a/base-manager-ui/admin/src/pages/basicset/surface/surface.vue
+++ b/base-manager-ui/admin/src/pages/basicset/surface/surface.vue
@@ -1,56 +1,54 @@
<template>
- <div class="surface">
- <div class="container">
- <TabHeader label="鐨偆绠＄悊">
- <a-space>
- <a-button v-permission="[1]" icon="plus" @click="addDev"
- >鏂板璁惧</a-button
- >
- <a-button
- type="primary"
- v-permission="[1]"
- @click="$router.push('surface/addsurfacetemplate')"
- >鏂板鐨偆妯℃澘</a-button
- >
- </a-space>
- </TabHeader>
- <div class="main">
- <div class="menu-box">
- <LeftMenu
- ref="LeftMenu"
- @clickFacility="clickFacility"
- @searchProduct="searchProduct"
- ></LeftMenu>
- </div>
- <div class="show-box">
- <ShowBox @editSkin="editSkin"></ShowBox>
- </div>
- <div class="preview-box">
- <RightPreview
- ref="RightPreview"
- @addSkin="addSkin"
- @editClassify="editClassify"
- :classifyList="classifyList"
- ></RightPreview>
- </div>
+ <div class="surface flex flexc">
+ <TabHeader label="鐨偆绠＄悊">
+ <a-space>
+ <a-button v-permission="[1]" icon="plus" @click="addDev"
+ >鏂板璁惧</a-button
+ >
+ <a-button
+ type="primary"
+ v-permission="[1]"
+ @click="$router.push('surface/addsurfacetemplate')"
+ >鏂板鐨偆妯℃澘</a-button
+ >
+ </a-space>
+ </TabHeader>
+ <div class="main flex1">
+ <div class="menu-box">
+ <LeftMenu
+ ref="LeftMenu"
+ @clickFacility="clickFacility"
+ @searchProduct="searchProduct"
+ ></LeftMenu>
+ </div>
+ <div class="show-box">
+ <ShowBox @editSkin="editSkin"></ShowBox>
+ </div>
+ <div class="preview-box">
+ <RightPreview
+ ref="RightPreview"
+ @addSkin="addSkin"
+ @editClassify="editClassify"
+ :classifyList="classifyList"
+ ></RightPreview>
</div>
- <!-- 缂栬緫鍒嗙被寮圭獥 -->
- <EditClassify
- :visible.sync="visible"
- :classifyList="classifyList"
- @addCategorySuccess="addCategorySuccess"
- @closeModal="addCategorySuccess"
- ></EditClassify>
- <!-- 鏂板锛岀紪杈戠毊鑲ゅ脊绐� -->
- <AddSurface
- ref="AddSurface"
- :isShow.sync="isShow"
- :classifyList="classifyList"
- @addSkinSuccess="addSkinSuccess"
- ></AddSurface>
- <!-- 鏂板璁惧 -->
- <AddDev :visible.sync="addDevVisible" @addDev="addDevSuccess"></AddDev>
</div>
+ <!-- 缂栬緫鍒嗙被寮圭獥 -->
+ <EditClassify
+ :visible.sync="visible"
+ :classifyList="classifyList"
+ @addCategorySuccess="addCategorySuccess"
+ @closeModal="addCategorySuccess"
+ ></EditClassify>
+ <!-- 鏂板锛岀紪杈戠毊鑲ゅ脊绐� -->
+ <AddSurface
+ ref="AddSurface"
+ :isShow.sync="isShow"
+ :classifyList="classifyList"
+ @addSkinSuccess="addSkinSuccess"
+ ></AddSurface>
+ <!-- 鏂板璁惧 -->
+ <AddDev :visible.sync="addDevVisible" @addDev="addDevSuccess"></AddDev>
</div>
</template>
@@ -142,15 +140,9 @@ export default {
.surface {
width: 100%;
height: 100%;
- .container {
- width: 100%;
- height: 100%;
- position: relative;
- }
+ position: relative;
.main {
height: 100%;
- border-top: 1px solid rgb(224, 224, 224);
- background-color: #fff;
display: flex;
.menu-box {
width: 20%;
@@ -158,19 +150,12 @@ export default {
}
.show-box {
width: 65%;
+ height: 100%;
}
.preview-box {
width: 15%;
+ height: 100%;
}
}
}
-/deep/.ant-card {
- height: 100%;
- display: flex;
- flex-direction: column;
-}
-/deep/.ant-card-body {
- flex: 1;
- padding: 0px;
-}
</style>
\ No newline at end of file
--
2.24.3