修改网上缴费页面

src/views/win/watersupplyParts/listIndex.vue

@@ -14,7 +14,7 @@
       </el-col>
       <el-col :span="24" v-if="tabActive == '6'">
         <!-- TODO:网上缴费组件 -->
-        <online-pay></online-pay>
+        <payment></payment>
       </el-col>
       <el-col :span="24" v-else-if="tabActive == '7'">
         <!-- 网上办事大厅是跳转走的.不需要显示内容 -->
@@ -48,7 +48,7 @@
 import { ref, onMounted } from 'vue'
 /* 分页 */
 import pagesIndex from '../../../components/windows/pagesIndex.vue'
-import onlinePay from './onlinePay.vue'
+import payment from './payment.vue'
 import { get } from 'lodash-es'
 import { ElMessageBox } from 'element-plus'
 

src/views/win/watersupplyParts/onlinePay.vue

@@ -1,8 +0,0 @@
-<template>
-  <div id="onlinePay">
-    <p>onlinePay</p>
-  </div>
-</template>
-
-<script setup></script>
-<style scoped></style>

src/views/win/watersupplyParts/payment.vue

@@ -0,0 +1,71 @@
+<template>
+  <el-row class="payment">
+    <el-col :span="24" class="payment_1">
+      <el-image class="images" :src="pay"></el-image>
+    </el-col>
+    <el-col :span="24" class="payment_2">
+      <span>业务办理：</span>
+      <el-link type="primary" href="http://www.changchun.gov.cn/" target="_blank" :underline="false"
+        >一门式一张网</el-link
+      >
+    </el-col>
+    <el-col :span="24" class="payment_2">
+      <span>网上缴费：</span>
+      <el-link type="primary" href="https://jlbank.com.cn/" target="_blank" :underline="false"
+        >吉林银行</el-link
+      >
+      <el-link type="primary" href="https://www.icbc.com.cn/icbc/" target="_blank" :underline="false"
+        >工商银行</el-link
+      >
+      <el-link type="primary" href="https://www.ccb.com/cn/home/indexv3.html" target="_blank" :underline="false"
+        >建设银行</el-link
+      >
+      <el-link type="primary" href="https://www.jlbank.com.cn/" target="_blank" :underline="false"
+        >支付宝</el-link
+      >
+      <el-link type="primary" href="https://www.bestpay.com.cn/" target="_blank" :underline="false"
+        >中国电信翼支付</el-link
+      >
+      <el-link type="primary" href="https://www.bankcomm.com/BankCommSite/default.shtml" target="_blank" :underline="false"
+        >交通银行</el-link
+      >
+      <el-link type="primary" href="https://www.shengjingbank.com.cn/" target="_blank" :underline="false"
+        >盛京银行</el-link
+      >
+    </el-col>
+    <el-col :span="24" class="payment_3">
+      <span> 操作步骤：1.下载缴费软件；2.注册账号；3.添加银行卡；4.登录水务账号；5.缴费。</span>
+    </el-col>
+  </el-row>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+const pay = ref('pay.png')
+</script>
+<style scoped lang="scss">
+.payment {
+  .payment_1 {
+    .images {
+      height: 20vh;
+    }
+  }
+  .payment_2 {
+    height: 8vh;
+    line-height: 8vh;
+    border-bottom: 1px solid #3c9bd3;
+    font-family: '黑体';
+    font-size: 18px;
+    :deep(.el-link__inner) {
+      font-family: '黑体';
+      font-size: 18px;
+      margin: 0 10px;
+    }
+  }
+  .payment_3 {
+    margin-top: 4vh;
+    font-family: '黑体';
+    font-size: 18px;
+  }
+}
+</style>