소스 검색

添加图标,修改样式,划分组件

shaun-sheep 4 년 전
부모
커밋
72eb9cb5d3

파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 10 - 6
src/assets/style/iconfont/iconfont.css


BIN
src/assets/style/iconfont/iconfont.eot


파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
+ 3 - 0
src/assets/style/iconfont/iconfont.svg


BIN
src/assets/style/iconfont/iconfont.ttf


BIN
src/assets/style/iconfont/iconfont.woff


+ 82 - 13
src/components/brand/brandTool.vue

@@ -1,27 +1,96 @@
 <!--
  * @Author: zhangyu
  * @Date: 2020-05-08 18:37:31
- * @Info: 
+ * @Info:
  * @LastEditTime: 2020-05-08 19:01:25
  -->
 <template>
-  <div>
-    <span>品牌总数</span>
+  <div class="saga-toolbar-box">
+    <div class="saga-toolbar-main">
+      <div class="box-name">
+        品牌总数
+        <span>100</span>个
+      </div>
+      <div class="box-name">
+        可能重复的品牌
+        <span>3</span>个
+      </div>
+      <div class="box-name">
+        信息不完整品牌
+        <span>7</span>个
+      </div>
+      <span style="float: right;">
+        <el-input
+          v-model="value"
+          style="width: 360px;"
+          placeholder="请输入关键词/拼音/首字母"
+          class="reset-input"
+        >
+          <i slot="prefix" class="el-input__icon el-icon-search"></i>
+        </el-input>
+         <el-button type="primary" @click="handBrand">添加产品</el-button>
+          </span>
+    </div>
+    <addBrand ref="addBrand" title="添加品牌"></addBrand>
+
   </div>
 </template>
 
 <script>
-export default {
-  components: {},
-  created() {},
-  mounted() {},
-  data() {
-    return {
+  import addBrand from "../../components/business/addBrand";
+
+  export default {
+    created() {
+    },
+    mounted() {
+    },
+    components: {addBrand},
+    data() {
+      return {
+        value:''
+      }
+    },
+    methods: {
+      handBrand() {
+        this.$refs.addBrand.outerVisible = true
+      },
     }
-  },
-  methods: {}
-}
+  }
 </script>
 <style lang="scss" scoped>
+  .saga-toolbar-box {
+    position: fixed;
+    top: 48px;
+    left: 0;
+    width: 100%;
+    height: 70px;
+    background: #fff;
+
+    .saga-toolbar-main {
+      width: 1200px;
+      height: 100%;
+      margin: auto;
+      line-height: 70px;
+
+    }
+
+    .box-name {
+      color: #646C73;
+      display: inline-block;
+      margin-right: 68px;
+
+      span {
+        color: #3A8DDE;
+        font-size: 20px;
+      }
+    }
+
+    .reset-input {
+      /deep/ .el-input__inner {
+        background: #F6F6F6;
+
+      }
+    }
 
-</style>
+  }
+</style>

+ 119 - 0
src/components/product/productTool.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="saga-toolbar-box">
+    <div class="saga-toolbar-main">
+      <div class="top-menu">
+        <!--        <selectTree-->
+        <!--          :props="props"-->
+        <!--          :options="optionData"-->
+        <!--          :value="valueId"-->
+        <!--          :clearable="isClearable"-->
+        <!--          :accordion="isAccordion"-->
+        <!--          @getValue="getValue($event)"/>-->
+        <span style="float: right;">
+           <el-input
+             v-model="value"
+             style="width: 360px"
+             placeholder="请输入关键词/拼音/首字母"
+             class="reset-input"
+           >
+           <i slot="prefix" class="el-input__icon el-icon-search"></i>
+           </el-input>
+              <el-button type="primary" @click="handBrand">添加产品</el-button>
+          </span>
+      </div>
+    </div>
+    <addBrand ref="addBrand" title="添加品牌"></addBrand>
+
+  </div>
+</template>
+
+<script>
+  import selectTree from "../../components/public/selectTree";
+  import addBrand from "../../components/business/addBrand";
+
+  export default {
+    components: {selectTree, addBrand},
+
+    created() {
+    },
+    mounted() {
+    },
+    data() {
+      return {
+        isClearable: true,      // 可清空(可选)
+        isAccordion: true,      // 可收起(可选)
+        valueId: 20,            // 初始ID(可选)
+        props: {                // 配置项(必选)
+          value: 'id',
+          label: 'name',
+          children: 'children',
+          // disabled:true
+        },
+        // 选项列表(必选)
+        list: [
+          {id: 1, parentId: 0, name: "一级菜单A", rank: 1},
+          {id: 2, parentId: 0, name: "一级菜单B", rank: 1},
+          {id: 3, parentId: 0, name: "一级菜单C", rank: 1},
+          {id: 4, parentId: 1, name: "二级菜单A-A", rank: 2},
+          {id: 5, parentId: 1, name: "二级菜单A-B", rank: 2},
+          {id: 6, parentId: 2, name: "二级菜单B-A", rank: 2},
+          {id: 7, parentId: 4, name: "三级菜单A-A-A", rank: 3},
+          {id: 20, parentId: 0, name: "一级菜单C", rank: 1},
+          {id: 39, parentId: 0, name: "一级菜单C", rank: 1},
+          {id: 40, parentId: 0, name: "一级菜单end", rank: 1}
+        ],
+        value: ''
+      }
+    },
+    methods: {
+      handBrand() {
+        this.$refs.addBrand.outerVisible = true
+      },
+      // 取值
+      getValue(value) {
+        this.valueId = value
+        console.log(this.valueId);
+      },
+    },
+    computed: {
+      /* 转树形数据 */
+      optionData() {
+        let cloneData = JSON.parse(JSON.stringify(this.list))      // 对源数据深度克隆
+        return cloneData.filter(father => {                      // 循环所有项,并添加children属性
+          let branchArr = cloneData.filter(child => father.id == child.parentId);       // 返回每一项的子级数组
+          branchArr.length > 0 ? father.children = branchArr : ''   //给父级添加一个children属性,并赋值
+          return father.parentId == 0;      //返回第一层
+        });
+      }
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .saga-toolbar-box {
+    position: fixed;
+    top: 48px;
+    left: 0;
+    width: 100%;
+    height: 70px;
+    background: #fff;
+
+    .saga-toolbar-main {
+      width: 1200px;
+      height: 100%;
+      margin: auto;
+    }
+
+    .top-menu {
+      width: 1200px;
+      margin: 0 auto;
+      padding-top: 20px;
+    }
+
+    .reset-input {
+      /deep/ .el-input__inner {
+        background: #F6F6F6;
+
+      }
+    }
+  }
+</style>

+ 160 - 0
src/components/product/sagaProduct.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="saga-product">
+    <div class="sidebar">
+      <div class="title">
+        <span class="iconfont iconfenlei"></span>&nbsp;产品分类
+      </div>
+      <div class="product-classification">
+        <el-popover
+          trigger="hover"
+          placement="right"
+          width="960">
+          <p>某某系统</p>
+          <div class="sys">
+            <span>燃气调压箱</span>
+            <span>燃气调压箱</span>
+            <span>燃气调压箱</span>
+            <span>燃气调压箱</span>
+            <span>燃气调压箱</span>
+            <span>燃气调压箱</span>
+            <span>燃气调压箱</span>
+
+          </div>
+          <div slot="reference" class="classification">
+            <p class="name">给排水专业—WS</p>
+            <p class="introduce">建筑各类生活、景观用水给水排水系统、燃气系统</p>
+          </div>
+        </el-popover>
+        <el-popover
+          trigger="hover"
+          placement="right"
+          width="960">
+          <p>某某系统</p>
+          <div class="sys">
+            <span>燃气石油气瓶</span>
+            <span>燃气石油气瓶</span>
+            <span>燃气石油气瓶</span>
+            <span>燃气石油气瓶</span>
+            <span>燃气石油气瓶</span>
+            <span>燃气调压箱</span>
+            <span>燃气调压箱</span>
+
+          </div>
+          <div slot="reference" class="classification">
+            <p class="name">给排水专业—WS</p>
+            <p class="introduce">建筑各类生活、景观用水给水排水系统、燃气系统</p>
+          </div>
+        </el-popover>
+      </div>
+    </div>
+    <div class="brand">
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "productBrand"
+  }
+</script>
+
+<style scoped lang="less">
+  @bgc: #fff;
+  .saga-product {
+    /*width: 1200px;*/
+    /*margin: 20px auto 0 auto;*/
+    margin-top: 90px;
+
+    display: flex;
+
+    .sidebar {
+      /*margin-top: 20px;*/
+      width: 200px;
+      background: @bgc;
+      display: inline-block;
+
+      .title {
+        height: 40px;
+        line-height: 40px;
+        background: #CBDFFC;
+        color: #3A8DDE;
+        padding-left: 10px;
+      }
+
+      .product-classification {
+        background: @bgc;
+        /*margin-top: -19px;*/
+
+        .classification {
+          cursor: pointer;
+          padding: 10px;
+          border-bottom: 1px solid #EFF0F1;
+
+          .name {
+            color: #1F2429;
+          }
+
+          .introduce {
+            color: #8D9399;
+          }
+        }
+
+        .classification:hover {
+          background: #E1F2FF;
+
+          .name {
+            color: #3A8DDE;
+          }
+
+          .introduce {
+            color: #3A8DDE;
+          }
+        }
+
+        .sys {
+          padding: 10px;
+
+          span {
+            margin: 0 20px;
+            color: #8D9399;
+            display: inline-block;
+          }
+        }
+
+
+      }
+    }
+
+    .brand {
+      margin-left: 20px;
+      background: @bgc;
+      flex-grow: 1;
+
+    }
+  }
+</style>
+<style lang="less">
+  .el-popover {
+    p:first-child {
+      border-left: 4px solid #3A8DDE;
+      color: #1F2329;
+      text-indent: 8px;
+    }
+
+    .sys {
+      span {
+        margin-right: 40px;
+        text-indent: 11px;
+        display: inline-block;
+        cursor: pointer;
+        color: #8D9399;
+
+
+      }
+
+      span:hover {
+        color: #3A8DDE
+      }
+    }
+  }
+</style>

+ 0 - 44
src/components/public/sagaToolbar.vue

@@ -1,44 +0,0 @@
-<!--
- * @Author: zhangyu
- * @Date: 2020-05-08 16:47:45
- * @Info: 
- * @LastEditTime: 2020-05-08 18:38:11
- -->
-<template>
-  <div class="saga-toolbar-box">
-    <div class="saga-toolbar-main">
-      <brand-tool></brand-tool>
-    </div> 
-  </div>
-</template>
-
-<script>
-import brandTool from "@/components/brand/brandTool"
-export default {
-  components: {
-    brandTool
-  },
-  created() {},
-  mounted() {},
-  data() {
-    return {
-    }
-  },
-  methods: {}
-}
-</script>
-<style lang="scss" scoped>
-  .saga-toolbar-box {
-    position: fixed;
-    top: 48px;
-    left: 0;
-    width: 100%;
-    height: 70px;
-    background: #fff;
-    .saga-toolbar-main {
-      width: 1200px;
-      height: 100%;
-      margin: auto;
-    }
-  }
-</style>

+ 23 - 14
src/components/public/selectTree.vue

@@ -1,18 +1,27 @@
 <template>
-  <el-select :value="valueTitle" :clearable="clearable" @clear="clearHandle">
-    <el-option :value="valueTitle" :label="valueTitle" class="options">
-      <el-tree
-        id="tree-option"
-        ref="selectTree"
-        :accordion="accordion"
-        :data="options"
-        :props="props"
-        :node-key="props.value"
-        :default-expanded-keys="defaultExpandedKey"
-        @node-click="handleNodeClick">
-      </el-tree>
-    </el-option>
-  </el-select>
+<!--  <el-select :value="valueTitle" :clearable="clearable" @clear="clearHandle">-->
+<!--    <el-option :value="valueTitle" :label="valueTitle" class="options">-->
+<!--      <el-tree-->
+<!--        id="tree-option"-->
+<!--        ref="selectTree"-->
+<!--        :accordion="accordion"-->
+<!--        :data="options"-->
+<!--        :props="props"-->
+<!--        :node-key="props.value"-->
+<!--        :default-expanded-keys="defaultExpandedKey"-->
+<!--        @node-click="handleNodeClick">-->
+<!--      </el-tree>-->
+<!--    </el-option>-->
+<!--  </el-select>-->
+
+  <el-dropdown>
+  <span class="el-dropdown-link">
+    {{value}}<i class="el-icon-arrow-down el-icon--right"></i>
+  </span>
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item v-for="item in options"> {{item.name}}</el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
 </template>
 
 <script>

+ 18 - 9
src/framework/layout/index.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="sign">
     <div class="content">
+      <div class="content-img"></div>
       <ul class="poa brand font-size">
         <li>1280</li>
         <li>已收录品牌</li>
@@ -82,11 +83,19 @@
 
     .content {
       width: 1200px;
-      height: 100%;;
-      margin: 0 auto;
-      position: relative;
-      object-fit: cover;
-      background: url(~@/assets/images/content.png) center center no-repeat;
+      height: 720px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+
+      .content-img {
+        width: 1200px;
+        height: 100%;;
+        margin: 0 auto;
+        object-fit: cover;
+        background: url(~@/assets/images/content.png) center center no-repeat;
+      }
 
       .poa {
         position: absolute;
@@ -94,17 +103,17 @@
 
       .brand {
         left: 190px;
-        top: 172px;
+        top: 50px;
       }
 
       .product {
         left: 195px;
-        top: 412px;
+        top: 293px;
       }
 
       .parameter {
         left: 195px;
-        top: 660px;
+        top: 536px;
       }
 
       .font-size {
@@ -124,7 +133,7 @@
         right: 100px;
         width: 450px;
         height: 500px;
-        top: 200px;
+        top: 95px;
 
         .form {
           width: 300px;

+ 11 - 4
src/router/system.js

@@ -4,10 +4,11 @@ import Dasboard from '@/views/dasboard'
 import login from '@/framework/layout'
 // 品牌管理
 import brand from '@/views/brand'
+
+//产品管理
+import product from "@/views/product/index"
 //测试页面
 import test from '@/components/test'
-//产品管理
-import product from "@/views/product";
 /**模型管理 */
 import modelFile from '@/views/model/file'
 
@@ -32,8 +33,14 @@ export default [
   //产品管理
   {
     path: '/product',
-    name: 'product',
-    component: product,
+    name: 'LayoutMain',
+    component: LayoutMain,
+    children: [{
+      path: '',
+      name: 'product',
+      component: product
+    },
+    ]
   },
   // 品牌管理
   {

+ 3 - 3
src/views/brand/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: zhangyu
  * @Date: 2020-05-08 15:55:30
- * @Info: 
+ * @Info:
  * @LastEditTime: 2020-05-08 16:49:36
  -->
 <template>
@@ -13,7 +13,7 @@
 
 <script>
 import sagaBrand from "@/components/brand/sagaBrand"
-import sagaToolbar from "@/components/public/sagaToolbar"
+import sagaToolbar from "@/components/brand/brandTool"
 export default {
   name: "brand",
   components: {
@@ -31,4 +31,4 @@ export default {
 </script>
 <style lang="scss" scoped>
 
-</style>
+</style>

+ 0 - 222
src/views/product.vue

@@ -1,222 +0,0 @@
-<template>
-  <div class="product">
-    <div class="top">
-      <div class="top-menu">
-        <selectTree
-          :props="props"
-          :options="optionData"
-          :value="valueId"
-          :clearable="isClearable"
-          :accordion="isAccordion"
-          @getValue="getValue($event)"/>
-        <span style="float: right;">
-              <search text="请输入关键词/拼音/首字母" type="header"></search>&nbsp;
-              <el-button type="primary" @click="handBrand">添加产品</el-button>
-              <addBrand ref="addBrand" title="添加品牌"></addBrand>
-          </span>
-      </div>
-    </div>
-    <div class="content">
-      <div class="sidebar">
-        <div class="title">产品分类</div>
-        <div class="product-classification">
-          <el-popover
-            trigger="hover"
-            placement="right"
-            width="600">
-            <p>某某系统</p>
-            <div class="sys">
-              <span>燃气调压箱</span>
-              <span>燃气调压箱</span>
-              <span>燃气调压箱</span>
-              <span>燃气调压箱</span>
-              <span>燃气调压箱</span>
-              <span>燃气调压箱</span>
-              <span>燃气调压箱</span>
-
-            </div>
-            <!--            <div style="text-align: right; margin: 0">-->
-            <!--              <el-button size="mini" type="text" @click="visible = false">取消</el-button>-->
-            <!--              <el-button type="primary" size="mini" @click="visible = false">确定</el-button>-->
-            <!--            </div>-->
-            <div slot="reference" class="classification">
-              <p class="name">给排水专业—WS</p>
-              <p class="introduce">建筑各类生活、景观用水给水排水系统、燃气系统</p>
-            </div>
-
-          </el-popover>
-
-        </div>
-      </div>
-      <div class="brand">
-        <div class="brand-top">
-          <el-dropdown style="margin-left: 20px">
-              <span class="el-dropdown-link">
-                下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
-              </span>
-            <el-dropdown-menu slot="dropdown">
-              <el-dropdown-item>黄金糕</el-dropdown-item>
-              <el-dropdown-item>狮子头</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-          <!--              <search text="请输入品牌名称" type="content"></search>-->
-        </div>
-
-      </div>
-    </div>
-
-  </div>
-</template>
-
-<script>
-  import selectTree from "../components/public/selectTree";
-  import search from "../components/public/search"
-  import addBrand from "../components/business/addBrand";
-
-  export default {
-    name: "product",
-    components: {selectTree, search, addBrand},
-    data() {
-      return {
-        isClearable: true,      // 可清空(可选)
-        isAccordion: true,      // 可收起(可选)
-        valueId: 20,            // 初始ID(可选)
-        props: {                // 配置项(必选)
-          value: 'id',
-          label: 'name',
-          children: 'children',
-          // disabled:true
-        },
-        // 选项列表(必选)
-        list: [
-          {id: 1, parentId: 0, name: "一级菜单A", rank: 1},
-          {id: 2, parentId: 0, name: "一级菜单B", rank: 1},
-          {id: 3, parentId: 0, name: "一级菜单C", rank: 1},
-          {id: 4, parentId: 1, name: "二级菜单A-A", rank: 2},
-          {id: 5, parentId: 1, name: "二级菜单A-B", rank: 2},
-          {id: 6, parentId: 2, name: "二级菜单B-A", rank: 2},
-          {id: 7, parentId: 4, name: "三级菜单A-A-A", rank: 3},
-          {id: 20, parentId: 0, name: "一级菜单C", rank: 1},
-          {id: 39, parentId: 0, name: "一级菜单C", rank: 1},
-          {id: 40, parentId: 0, name: "一级菜单end", rank: 1}
-        ]
-      };
-    },
-    computed: {
-      /* 转树形数据 */
-      optionData() {
-        let cloneData = JSON.parse(JSON.stringify(this.list))      // 对源数据深度克隆
-        return cloneData.filter(father => {                      // 循环所有项,并添加children属性
-          let branchArr = cloneData.filter(child => father.id == child.parentId);       // 返回每一项的子级数组
-          branchArr.length > 0 ? father.children = branchArr : ''   //给父级添加一个children属性,并赋值
-          return father.parentId == 0;      //返回第一层
-        });
-      }
-    },
-    methods: {
-      // 取值
-      getValue(value) {
-        this.valueId = value
-        console.log(this.valueId);
-      },
-      handBrand() {
-        this.$refs.addBrand.outerVisible = true
-      }
-    }
-  }
-</script>
-
-<style scoped lang="less">
-  @bgc: #fff;
-  .product {
-    background: #F7F9FA;
-    height: 100%;
-
-    .top {
-      height: 70px;
-      width: 100%;
-      background: @bgc;
-
-      .top-menu {
-        width: 1200px;
-        margin: 0 auto;
-        padding-top: 20px;
-      }
-    }
-
-    .content {
-      width: 1200px;
-      margin: 20px auto 0 auto;
-      display: flex;
-
-      .sidebar {
-        /*margin-top: 20px;*/
-        width: 200px;
-        background: @bgc;
-        display: inline-block;
-
-        .title {
-          height: 40px;
-          line-height: 40px;
-          background: #CBDFFC;
-          color: #3A8DDE;
-          padding-left: 10px;
-        }
-
-        .product-classification {
-          background: @bgc;
-          /*margin-top: -19px;*/
-
-          .classification {
-            cursor: pointer;
-            padding: 10px;
-            border-bottom: 1px solid #EFF0F1;
-
-            .name {
-              color: #1F2429;
-            }
-
-            .introduce {
-              color: #8D9399;
-            }
-          }
-
-          .classification:hover {
-            background: #E1F2FF;
-
-            .name {
-              color: #3A8DDE;
-            }
-
-            .introduce {
-              color: #3A8DDE;
-            }
-          }
-
-          .sys {
-            padding: 10px;
-
-            span {
-              margin: 0 20px;
-              color: #8D9399;
-              display: inline-block;
-            }
-          }
-        }
-      }
-
-      .brand {
-        margin-left: 20px;
-        background: @bgc;
-        flex-grow: 1;
-
-        .brand-top {
-          height: 57px;
-          line-height: 57px;
-        }
-      }
-    }
-
-
-  }
-</style>

+ 25 - 0
src/views/product/index.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="product">
+    <productTool/>
+    <sagaProduct/>
+  </div>
+</template>
+
+<script>
+  import productTool from "../../components/product/productTool";
+  import sagaProduct from "../../components/product/sagaProduct";
+
+  export default {
+    name: "product",
+    components: {productTool, sagaProduct},
+    data() {
+      return {};
+    },
+    computed: {},
+    methods: {}
+  }
+</script>
+
+<style scoped lang="less">
+
+</style>