业务选择

src/pages/counter/list/index.vue

@@ -197,26 +197,21 @@
         <!-- 业务选择 --弹框 -->
         <el-dialog :visible.sync="showBusiness" style="width: 100%" @close="closeData" :close-on-click-modal="false" :show-close="false" custom-class="data-dia">
             <div slot="title" class="dia-header2">
-                <div class="data-title2">什么</div>
+                <div class="data-title2">请选择系统</div>
                 <div class="close"><img v-lazy="lazyImg[28]" alt="" @click="selectBusiness(false)" /></div>
             </div>
-            <p class="tips">- 请单击选中复印材料、双击可放大预览 -</p>
-            <ul class="list" style="justify-content: center">
-                <li :class="{checked: true}">
-                    <img src="@/assets/img/idCard-sm.png" alt="">
-                    <p>身份证</p>
-                </li>
-                
-                <li :class="{checked: true}">
-                    <el-image
-                        style="margin-top: -10"
-                        src="@/assets/img/idCard-sm.png"
-                        ></el-image>
-                    <p>开户申请书</p>
+            <p class="tips2">python程序设计 | 请选择您要做的项目实验</p>
+            <ul class="take-list2">
+                <li v-for="(item, index) in businessArr" :class="{checked: takeCheck == index}" :key="index" @click="checkTake(index)">
+                    <img v-lazy="item.img" alt="">
+                    <p>{{ item.text}}</p>
                 </li>
             </ul>
-            <div class="dia-footer">
-                <button type="button" @click="selectBusiness(false)">确定</button>
+            <div class="dia-footer2">
+                <div class='busyButtonBox'>
+                    <el-button @click="selectBusiness(false)">取消</el-button>
+                    <el-button type="primary" @click="selectBusiness(false)">确定</el-button>
+                </div>
             </div>
         </el-dialog>
     </div>
@@ -261,6 +256,13 @@ export default {
             }
         };
         return {
+            takeCheck: -1, // 选择业务逻辑
+            businessArr: [ 
+                {
+                    img: require('@/assets/svg/cash.svg'),
+                    text: '第一个'
+                },
+            ],            // 选择业务逻辑
             showBusiness: false,
             manageVisible: false, // 显示系统录入
             checkList: [],// 物品栏选中
@@ -939,6 +941,9 @@ export default {
             removeGoodsOpen: 'system/removeGoodsOpen',
             addGoodsOpen: 'system/addGoodsOpen',
         }),
+        checkTake(index){
+            this.takeCheck = index
+        },
         selectBusiness(turn) {
             this.showBusiness = turn;
         },
@@ -2529,7 +2534,7 @@ export default {
             height:70px;
             width: 300px;
             margin: 0 auto;
-            line-height: 72px;
+            line-height: 70px;
             text-align: center;
             color: #fff;
             font-size: 24px;
@@ -2542,6 +2547,49 @@ export default {
             cursor: pointer;
         }
     }
+
+    // 业务选择中的
+    .take-list2{
+        width: 100%;
+        display: flex;
+        justify-content: space-around;
+        flex-direction: row;
+        flex-wrap: wrap;
+        height: 40vh;
+        overflow: auto;
+        li{
+            display: inline-flex;
+            align-items: center;
+            width: 30%;
+            height: 10vh;
+            border: 4px solid #DBDBDB;
+            border-radius: 20px;
+            cursor: pointer;
+            background-color: rgba(216,216,216,0.10);
+            // &:first-child{
+            //     margin: 0 0px 50px 0;
+            // }
+            // &:last-child{
+            //     margin-left: 50px;
+            // }
+            img{
+                width: 30%;
+                margin: 0;
+                //height: 154px;
+                //margin: 0 45px;
+            }
+            p{
+                font-size: 14px;
+                color: #000;
+                text-align: center;
+                padding: 0 20px;
+            }
+            &.checked{
+                background: rgba(97,145,255,0.10) url(../../../assets/svg/checked.svg) 96% 7%/auto no-repeat;
+                border-color: #6191FF;
+            }
+        }
+    }
     .dia-header2 {
         position: relative;height: 50px;
         line-height: 50px;
@@ -2572,6 +2620,12 @@ export default {
         font-size: 20px;
         color: #000;
     }
+    .tips2 {
+        margin: 1vh 0 2vh 0;
+        text-align: left;
+        font-size: 20px;
+        color: #000;
+    }
     .list {
         width: 940px;
         min-height: 204px;
@@ -2714,6 +2768,17 @@ export default {
             }
         }
     }
+    .dia-footer2 {
+        height: 70px;
+        line-height: 70px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        .busyButtonBox {
+            display: flex;
+            justify-content: space-between;
+        }
+    }
 }
 
 // 兼容小的data-dia