前端

fuintAdmin/src/views/oilConfig/oilGun/list.vue

@@ -1,16 +1,13 @@
 <template>
     <div class="app-container">
-      <el-card class="box-card">
-        <div slot="header" class="clearfix">
-          <span>油枪管理</span>
-        </div>
 
-        <div class="conten-box" v-for="(item,index) in gunList" :key="index">
+      <div class="bor-bai" v-for="(item,index) in gunList" :key="index">
-          <div class="conten-top" style="display: flex; justify-content: space-between;">
+        <div class="box-top">
-            <div>{{item.oilType}} {{item.oilName}}</div>
+          <div class="title_">{{item.oilType}} {{item.oilName}}</div>
           <div>
             <el-button
               type="primary"
+              style="background: linear-gradient( 229deg, #FF8646 0%, #FFA360 100%);"
               icon="el-icon-plus"
               @click="gunAdd(item.numberId)"
             >新增油枪</el-button>
@@ -22,6 +19,9 @@
               <div>{{item.tankName}}</div>
               <div style="cursor: pointer" ><i class="el-icon-edit"  @click="gunEdit(item)"></i> <i class="el-icon-delete" @click="delGun(item.id)"></i></div>
             </div>
+
+            <img  class="cardbox-rd" src="./imgs/r-img.png" alt="">
+
             <div class="cardbox-title">
               <div>{{item.gunName}}</div>
             </div>
@@ -29,13 +29,58 @@
               <!--                <div>ID:{{ item.id }}</div>-->
             </div>
             <div class="cardboxb" v-if="item.oilMachineGunNumber != null ">
-                <i class="el-icon-share"></i>
               <div>{{item.oilMachineGunNumber}}</div>
             </div>
+
           </div>
         </div>
+
+
       </div>
-      </el-card>
+
+
+
+
+
+<!--      <el-card class="box-card">-->
+<!--        <div slot="header" class="clearfix">-->
+<!--          <span>油枪管理</span>-->
+<!--        </div>-->
+
+<!--        <div class="conten-box" v-for="(item,index) in gunList" :key="index">-->
+<!--          <div class="conten-top" style="display: flex; justify-content: space-between;">-->
+<!--            <div>{{item.oilType}} {{item.oilName}}</div>-->
+<!--            <div>-->
+<!--              <el-button-->
+<!--                type="primary"-->
+<!--                icon="el-icon-plus"-->
+<!--                @click="gunAdd(item.numberId)"-->
+<!--              >新增油枪</el-button>-->
+<!--            </div>-->
+<!--          </div>-->
+<!--          <div class="conten-bottom">-->
+<!--            <div class="cardbox" :class="{ 'act-cardbox': item.status == '启用' }"  v-for="(item,index) in item.oilGunList" :key="index">-->
+<!--              <div class="cardbox-top" :class="{ 'actcolor':item.status == '启用' }">-->
+<!--                <div>{{item.tankName}}</div>-->
+<!--                <div style="cursor: pointer" ><i class="el-icon-edit"  @click="gunEdit(item)"></i> <i class="el-icon-delete" @click="delGun(item.id)"></i></div>-->
+<!--              </div>-->
+
+<!--                <img  class="cardbox-rd" src="./imgs/r-img.png" alt="">-->
+
+<!--              <div class="cardbox-title">-->
+<!--                <div>{{item.gunName}}</div>-->
+<!--              </div>-->
+<!--              <div class="cardbox-bottom" :class="{ 'actcolor':item.status == '启用' }">-->
+<!--&lt;!&ndash;                <div>ID:{{ item.id }}</div>&ndash;&gt;-->
+<!--              </div>-->
+<!--              <div class="cardboxb" v-if="item.oilMachineGunNumber != null ">-->
+<!--                <div>{{item.oilMachineGunNumber}}</div>-->
+<!--              </div>-->
+
+<!--            </div>-->
+<!--          </div>-->
+<!--        </div>-->
+<!--      </el-card>-->
       <el-dialog
         :title="title"
         :visible.sync="dialogVisible"
@@ -289,12 +334,29 @@ import {cleanTankApi} from "@/api/oilConfig/oilTank";
   .app-container{
     height: 100%;
   }
-  .text {
+  .bor-bai{
-    font-size: 14px;
+    width: 100%;
-  }
+    border-radius: 10px ;
+    box-sizing: border-box;
+    padding: 20px;
+    background: #fff;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
+    margin-bottom: 20px;
+
+
+  }
+  .title_{
+    font-weight: bold;
+    font-size: 18px;
+    color: #333333;
+  }
+  .wrap-box{
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .oil-box{
 
-  .item {
-    margin-bottom: 18px;
   }
 
   .clearfix:before,
@@ -332,9 +394,18 @@ import {cleanTankApi} from "@/api/oilConfig/oilTank";
     padding: 10px;
     border-radius: 4px;
     width: 19%;
-    background: url(../../../assets/images/jybjj.png) center no-repeat;
+
     background-size:40% 70%;
     background-color: #f9f9f9;
+    position: relative;
+  }
+  .cardbox-rd{
+    position: absolute;
+    right: 5px;
+    bottom: 0px;
+    width:50px;
+    height: 50px;
+
   }
   .act-cardbox{
     position: relative;
@@ -345,10 +416,10 @@ import {cleanTankApi} from "@/api/oilConfig/oilTank";
     padding: 10px;
     border-radius: 4px;
     width: 19%;
-    background: url(../../../assets/images/jybjj.png) center no-repeat;
+    //background: url(../../../assets/images/jybjj.png) center no-repeat;
     background-size:40% 70%;
-    background-color: #ecf5ff;
+    background-color: #fff9f5;
-    color: #409eff !important;
+    color: #FF9655 !important;
   }
   .cardboxb{
     position: absolute;
@@ -359,15 +430,16 @@ import {cleanTankApi} from "@/api/oilConfig/oilTank";
     align-items: center;
     justify-content: center;
     color: white;
-    font-size: 14px;
+    font-size: 12px;
     left: 0px;
     bottom: 0px;
-    padding-right: 5px;
+    padding: 5px 10px;
-    background: #409eff;
+    background: linear-gradient( 312deg, #FF8646 0%, #FFA360 100%);
+    border-radius: 0px 10px 0px 10px;
   }
 
   .actcolor{
-    color: #409eff !important;
+    color: #FF9655 !important;
   }
   .cardbox-top{
     display: flex;
@@ -398,5 +470,12 @@ import {cleanTankApi} from "@/api/oilConfig/oilTank";
     display: flex;
     align-items: center;
   }
+  .box-top{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    width: 100%;
+  }
 
 </style>