dev #6
BIN
src/assets/images/Alipay.png
Normal file
BIN
src/assets/images/Alipay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
src/assets/images/wechat.png
Normal file
BIN
src/assets/images/wechat.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
@ -2,49 +2,104 @@
|
||||
<div>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{ title }}</h5>
|
||||
<p>DataTables has most features enabled by default, so all you need to do to use it with your own tables is to
|
||||
call the construction function: <code>$().DataTable();</code>.</p>
|
||||
<h5 class="card-title text-center card-header">{{ title }}</h5>
|
||||
<div id="zero-conf_wrapper" class="dataTables_wrapper dt-bootstrap4">
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div class="dataTables_length" id="zero-conf_length"><label>展示 <select name="zero-conf_length"
|
||||
aria-controls="zero-conf" class="custom-select custom-select-sm form-control form-control-sm"
|
||||
v-model="pageSize">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-sm-12 col-md-6 d-flex align-items-center">
|
||||
<div class="dataTables_length" id="zero-conf_length">
|
||||
<label class="d-flex align-items-center" style="white-space: nowrap">
|
||||
展示
|
||||
<select
|
||||
name="zero-conf_length"
|
||||
aria-controls="zero-conf"
|
||||
class="custom-select custom-select-sm form-control form-control-sm mx-2"
|
||||
v-model="pageSize"
|
||||
>
|
||||
<option value="10">10</option>
|
||||
<option value="25">25</option>
|
||||
<option value="50">50</option>
|
||||
<option value="100">100</option>
|
||||
</select>条数据</label></div>
|
||||
</select>
|
||||
条数据
|
||||
</label>
|
||||
</div>
|
||||
<div class="ms-3">
|
||||
<label class="d-flex align-items-center" style="white-space: nowrap">
|
||||
搜索:
|
||||
<input
|
||||
type="search"
|
||||
class="form-control form-control-sm ms-2"
|
||||
placeholder="请输入关键字"
|
||||
aria-controls="zero-conf"
|
||||
/>
|
||||
<button class="btn btn-sm btn-secondary ms-2" @click="handleSearch">
|
||||
搜索
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<div id="zero-conf_filter" class="dataTables_filter"><label>搜索:<input type="search"
|
||||
class="form-control form-control-sm" placeholder="" aria-controls="zero-conf"></label></div>
|
||||
<div class="col-sm-12 col-md-6 text-center">
|
||||
<button class="btn btn-sm btn-primary ms-2" @click="handleAddUser">
|
||||
添加
|
||||
</button>
|
||||
<button class="btn btn-sm btn-danger ms-2" @click="handleBatchDelete">
|
||||
批量删除
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<table id="zero-conf" class="display dataTable" style="width:100%" role="grid"
|
||||
aria-describedby="zero-conf_info">
|
||||
<table
|
||||
id="zero-conf"
|
||||
class="display dataTable"
|
||||
style="width: 100%"
|
||||
role="grid"
|
||||
aria-describedby="zero-conf_info"
|
||||
>
|
||||
<thead>
|
||||
<tr role="row">
|
||||
<th class="sorting_asc" tabindex="0" aria-controls="zero-conf" rowspan="1" colspan="1"
|
||||
aria-sort="ascending" aria-label="Name: activate to sort column descending"
|
||||
style="width: 85.5469px;" v-for="(item, index) in headers" :key="index">{{ item.text }}</th>
|
||||
<th
|
||||
class="sorting_asc"
|
||||
tabindex="0"
|
||||
aria-controls="zero-conf"
|
||||
rowspan="1"
|
||||
colspan="1"
|
||||
aria-sort="ascending"
|
||||
aria-label="Name: activate to sort column descending"
|
||||
style="width: 85.5469px"
|
||||
v-for="(item, index) in headers"
|
||||
:key="index"
|
||||
>
|
||||
{{ item.text }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr role="row" v-for="(item, rowIndex) in rows" :key="rowIndex"
|
||||
:class="rowIndex % 2 ? 'even' : 'odd'">
|
||||
<tr
|
||||
role="row"
|
||||
v-for="(item, rowIndex) in rows"
|
||||
:key="rowIndex"
|
||||
:class="rowIndex % 2 ? 'even' : 'odd'"
|
||||
>
|
||||
<td v-for="(header, colIndex) in headers" :key="colIndex">
|
||||
<div v-if="header.type == null">
|
||||
<span>{{ item[header.value] }}</span>
|
||||
</div>
|
||||
<div v-if="header.type == 'bool'">
|
||||
<span :class="['badge',item[header.value] ? 'bg-danger' : 'bg-success']">{{ item[header.value] ? '禁用' : '正常'}}</span>
|
||||
<span
|
||||
:class="[
|
||||
'badge',
|
||||
item[header.value] ? 'bg-danger' : 'bg-success',
|
||||
]"
|
||||
>{{ item[header.value] ? "禁用" : "正常" }}</span
|
||||
>
|
||||
</div>
|
||||
<div v-if="header.type == 'arrObj'">
|
||||
<span class="badge bg-info" v-for="(objItem,objIndex) in item[header.value]" :key="objIndex">
|
||||
<span
|
||||
class="badge bg-info"
|
||||
v-for="(objItem, objIndex) in item[header.value]"
|
||||
:key="objIndex"
|
||||
>
|
||||
{{ objItem[header.child] }}
|
||||
</span>
|
||||
</div>
|
||||
@ -56,15 +111,31 @@
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<button class="btn btn-outline-secondary m-b-xs" @click="modify(item.id)">修改</button>
|
||||
<button class="btn btn-outline-danger m-b-xs" @click="deleteData(item.id)">删除</button>
|
||||
|
||||
<button
|
||||
class="btn btn-outline-secondary m-b-xs"
|
||||
@click="modify(item.id)"
|
||||
>
|
||||
修改
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-outline-danger m-b-xs"
|
||||
@click="deleteData(item.id)"
|
||||
>
|
||||
删除
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th rowspan="1" colspan="1" v-for="(header, index) in headers" :key="index">{{ header.value }}</th>
|
||||
<th
|
||||
rowspan="1"
|
||||
colspan="1"
|
||||
v-for="(header, index) in headers"
|
||||
:key="index"
|
||||
>
|
||||
{{ header.value }}
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
@ -72,22 +143,79 @@
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-5">
|
||||
<div class="dataTables_info" id="zero-conf_info" role="status" aria-live="polite">正在展示 {{ (currentPageIndex * pageSize) - (pageSize - 1) }} 到 {{ currentPageIndex * pageSize }} 条数据 总计 {{dataCount}} 条</div>
|
||||
<div
|
||||
class="dataTables_info"
|
||||
id="zero-conf_info"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
正在展示 {{ currentPageIndex * pageSize - (pageSize - 1) }} 到
|
||||
{{ currentPageIndex * pageSize }} 条数据 总计 {{ dataCount }} 条
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-7">
|
||||
<div class="dataTables_paginate paging_simple_numbers" id="zero-conf_paginate">
|
||||
<div
|
||||
class="dataTables_paginate paging_simple_numbers"
|
||||
id="zero-conf_paginate"
|
||||
>
|
||||
<ul class="pagination">
|
||||
<li :class="['paginate_button', 'page-item', 'previous', (currentPageIndex == 1 ? 'disabled' : '')]"
|
||||
id="zero-conf_previous"><a href="#" aria-controls="zero-conf" data-dt-idx="0" tabindex="0"
|
||||
class="page-link" @click.prevent="previousPage">上一页</a></li>
|
||||
<li :class="['paginate_button','page-item',item.index == currentPageIndex ? 'active' : '']"
|
||||
v-for="(item,index) in pageBtn" :key="index"
|
||||
><a href="#" aria-controls="zero-conf" :data-dt-idx="item.index"
|
||||
tabindex="0" class="page-link" @click.prevent="currentPageIndex = item.index">{{item.text}}</a></li>
|
||||
<li
|
||||
:class="['paginate_button', 'page-item', 'next', (currentPageIndex == pageCount ? 'disabled' : '')]"
|
||||
id="zero-conf_next"><a href="#" aria-controls="zero-conf" data-dt-idx="7" tabindex="0"
|
||||
class="page-link" @click.prevent="nextPage">下一页</a></li>
|
||||
:class="[
|
||||
'paginate_button',
|
||||
'page-item',
|
||||
'previous',
|
||||
currentPageIndex == 1 ? 'disabled' : '',
|
||||
]"
|
||||
id="zero-conf_previous"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
aria-controls="zero-conf"
|
||||
data-dt-idx="0"
|
||||
tabindex="0"
|
||||
class="page-link"
|
||||
@click.prevent="previousPage"
|
||||
>上一页</a
|
||||
>
|
||||
</li>
|
||||
<li
|
||||
:class="[
|
||||
'paginate_button',
|
||||
'page-item',
|
||||
item.index == currentPageIndex ? 'active' : '',
|
||||
]"
|
||||
v-for="(item, index) in pageBtn"
|
||||
:key="index"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
aria-controls="zero-conf"
|
||||
:data-dt-idx="item.index"
|
||||
tabindex="0"
|
||||
class="page-link"
|
||||
@click.prevent="currentPageIndex = item.index"
|
||||
>{{ item.text }}</a
|
||||
>
|
||||
</li>
|
||||
<li
|
||||
:class="[
|
||||
'paginate_button',
|
||||
'page-item',
|
||||
'next',
|
||||
currentPageIndex == pageCount ? 'disabled' : '',
|
||||
]"
|
||||
id="zero-conf_next"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
aria-controls="zero-conf"
|
||||
data-dt-idx="7"
|
||||
tabindex="0"
|
||||
class="page-link"
|
||||
@click.prevent="nextPage"
|
||||
>下一页</a
|
||||
>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
@ -118,8 +246,8 @@ export default {
|
||||
},
|
||||
dataCount: {
|
||||
type: Number,
|
||||
required: true
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -130,12 +258,10 @@ export default {
|
||||
//总页数
|
||||
pageCount: 0,
|
||||
//分页按钮数据，[{text:'1',index:1},.....]
|
||||
pageBtn: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
pageBtn: [],
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
methods: {
|
||||
//下一页
|
||||
nextPage() {
|
||||
@ -144,11 +270,11 @@ export default {
|
||||
//上一页
|
||||
previousPage() {
|
||||
if (this.currentPageIndex > 1) {
|
||||
this.currentPageIndex--
|
||||
this.currentPageIndex--;
|
||||
}
|
||||
},
|
||||
changePage(pageIndex) {
|
||||
this.currentPageIndex == pageIndex
|
||||
this.currentPageIndex == pageIndex;
|
||||
},
|
||||
//更新总页数
|
||||
updatePageCount(newPageSize) {
|
||||
@ -156,82 +282,88 @@ export default {
|
||||
this.pageCount += this.dataCount % newPageSize == 0 ? 0 : 1;
|
||||
},
|
||||
//更新分页按钮数据
|
||||
updatePageBtn(newPageIndex){
|
||||
this.pageBtn = []
|
||||
updatePageBtn(newPageIndex) {
|
||||
this.pageBtn = [];
|
||||
//初始化首页
|
||||
this.pageBtn.push({text: '1', index: 1})
|
||||
this.pageBtn.push({ text: "1", index: 1 });
|
||||
//总页数小于8时显示全部页码
|
||||
if(this.pageCount <= 8){
|
||||
for(let i = 2; i < this.pageCount; i++){
|
||||
this.pageBtn.push({text: `${i}`, index: i})
|
||||
if (this.pageCount <= 8) {
|
||||
for (let i = 2; i < this.pageCount; i++) {
|
||||
this.pageBtn.push({ text: `${i}`, index: i });
|
||||
}
|
||||
}else{
|
||||
} else {
|
||||
//当前页左侧显示2格页码，当显示最小页码距离首页中间间隔大于1时隐藏间隔页面
|
||||
if(newPageIndex - 2 > 3){
|
||||
this.pageBtn.push({text: '...', index: newPageIndex})
|
||||
if (newPageIndex - 2 > 3) {
|
||||
this.pageBtn.push({ text: "...", index: newPageIndex });
|
||||
}
|
||||
//渲染当前页码左右各两格页码
|
||||
const numleft = (newPageIndex - 2) < 2 ? newPageIndex - 2 : 2;
|
||||
const numright = (newPageIndex + 2) < this.pageCount ? 2 : (this.pageCount - newPageIndex - 1);
|
||||
for(let i = newPageIndex - numleft; i <= newPageIndex + numright; i++){
|
||||
this.pageBtn.push({text: `${i}`, index: i})
|
||||
const numleft = newPageIndex - 2 < 2 ? newPageIndex - 2 : 2;
|
||||
const numright =
|
||||
newPageIndex + 2 < this.pageCount ? 2 : this.pageCount - newPageIndex - 1;
|
||||
for (let i = newPageIndex - numleft; i <= newPageIndex + numright; i++) {
|
||||
this.pageBtn.push({ text: `${i}`, index: i });
|
||||
}
|
||||
//当前页右侧显示2格页码，当显示最大页码距离尾页中间间隔大于1时隐藏间隔页面
|
||||
if(newPageIndex + 2 < this.pageCount - 2){
|
||||
this.pageBtn.push({text: '...', index: newPageIndex})
|
||||
if (newPageIndex + 2 < this.pageCount - 2) {
|
||||
this.pageBtn.push({ text: "...", index: newPageIndex });
|
||||
}
|
||||
}
|
||||
//渲染尾页
|
||||
this.pageBtn.push({text: `${this.pageCount}`, index: this.pageCount})
|
||||
},
|
||||
formatDateTime(str){
|
||||
if (!str) return '-';
|
||||
this.pageBtn.push({ text: `${this.pageCount}`, index: this.pageCount });
|
||||
},
|
||||
formatDateTime(str) {
|
||||
if (!str) return "-";
|
||||
|
||||
const date = new Date(str);
|
||||
if (isNaN(date)) return '-'; // 防止 Safari 报 Invalid Date
|
||||
const date = new Date(str);
|
||||
if (isNaN(date)) return "-"; // 防止 Safari 报 Invalid Date
|
||||
|
||||
const pad = n => n.toString().padStart(2, '0');
|
||||
const pad = (n) => n.toString().padStart(2, "0");
|
||||
|
||||
const Y = date.getFullYear();
|
||||
const M = pad(date.getMonth() + 1);
|
||||
const D = pad(date.getDate());
|
||||
const h = pad(date.getHours());
|
||||
const m = pad(date.getMinutes());
|
||||
const s = pad(date.getSeconds());
|
||||
const Y = date.getFullYear();
|
||||
const M = pad(date.getMonth() + 1);
|
||||
const D = pad(date.getDate());
|
||||
const h = pad(date.getHours());
|
||||
const m = pad(date.getMinutes());
|
||||
const s = pad(date.getSeconds());
|
||||
|
||||
return `${Y}-${M}-${D} ${h}:${m}:${s}`;
|
||||
},
|
||||
modify(id){
|
||||
this.$emit('dataModify',id)
|
||||
},
|
||||
deleteData(id){
|
||||
this.$emit('dataDelete',id)
|
||||
}
|
||||
return `${Y}-${M}-${D} ${h}:${m}:${s}`;
|
||||
},
|
||||
modify(id) {
|
||||
this.$emit("dataModify", id);
|
||||
},
|
||||
deleteData(id) {
|
||||
this.$emit("dataDelete", id);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
//监听分页大小变化
|
||||
'pageSize': {
|
||||
pageSize: {
|
||||
handler(newVal) {
|
||||
this.updatePageCount(newVal)
|
||||
this.updatePageCount(newVal);
|
||||
//单页显示数据量改变时重置当前索引，防止数据以及控件异常
|
||||
this.currentPageIndex = 1
|
||||
this.$emit('pageChanged',{pageIndex:this.currentPageIndex,pageSize:newVal})
|
||||
this.updatePageBtn(this.currentPageIndex)
|
||||
this.currentPageIndex = 1;
|
||||
this.$emit("pageChanged", { pageIndex: this.currentPageIndex, pageSize: newVal });
|
||||
this.updatePageBtn(this.currentPageIndex);
|
||||
},
|
||||
immediate: true
|
||||
immediate: true,
|
||||
},
|
||||
//监听页索引，用于切换数据
|
||||
'currentPageIndex': {
|
||||
currentPageIndex: {
|
||||
handler(newVal) {
|
||||
this.$emit('pageChanged',{pageIndex:newVal,pageSize:this.pageSize})
|
||||
this.updatePageBtn(newVal)
|
||||
this.$emit("pageChanged", { pageIndex: newVal, pageSize: this.pageSize });
|
||||
this.updatePageBtn(newVal);
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
}
|
||||
}
|
||||
immediate: true,
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 可自定义样式 */
|
||||
.card-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,20 +1,23 @@
|
||||
<template>
|
||||
<div class="error-page err-404 page">
|
||||
<div class="container">
|
||||
<div class="error-container">
|
||||
<div class="error-info">
|
||||
<h1>404</h1>
|
||||
<p>It seems that the page you are looking for no longer exists.<br>Please contact our <a href="#">help center</a> or go to the <RouterLink to="/home">homepage</RouterLink>.</p>
|
||||
</div>
|
||||
<div class="error-image"></div>
|
||||
</div>
|
||||
<div class="error-page err-404 page login-page">
|
||||
<div class="container">
|
||||
<div class="error-container">
|
||||
<div class="error-info">
|
||||
<h1>404</h1>
|
||||
<p>
|
||||
It seems that the page you are looking for no longer exists.<br />Please
|
||||
contact our <a href="#">help center</a> or go to the
|
||||
<RouterLink to="/home">homepage</RouterLink>.
|
||||
</p>
|
||||
</div>
|
||||
<div class="error-image"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'notfound'
|
||||
}
|
||||
name: "notfound",
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div class="row justify-content-center mt-5">
|
||||
<div class="card custom-card">
|
||||
<div class="card-header text-center">
|
||||
<h3 class="card-title">充值中心</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-4">
|
||||
<div class="col text-start">
|
||||
<div class="balance-box">
|
||||
<h5 class="balance-text">
|
||||
<i class="fas fa-wallet balance-icon"></i>
|
||||
剩余余额：<span class="balance-amount">{{ balance }}</span>
|
||||
</h5>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label class="form-label" for="formGroupExampleInput">充值金额</label>
|
||||
<div class="input-group">
|
||||
<input
|
||||
type="number"
|
||||
class="form-control custom-input"
|
||||
id="formGroupExampleInput"
|
||||
placeholder="请输入充值金额"
|
||||
v-model="formattedRechargeAmount"
|
||||
/>
|
||||
<div class="input-group-text custom-input-text">元</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<p class="payment-title">充值方式</p>
|
||||
<div class="container">
|
||||
<div class="row d-flex justify-content-between">
|
||||
<!-- 单选按钮 1 -->
|
||||
<div
|
||||
class="col-6 d-flex justify-content-center mb-3 option-box"
|
||||
:class="{ 'selected-box': selectedpay === 'alipay' }"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
id="option1"
|
||||
name="options"
|
||||
class="hidden-radio"
|
||||
value="alipay"
|
||||
v-model="selectedpay"
|
||||
/>
|
||||
<label for="option1" class="label-style">
|
||||
<img src="../../assets/images/Alipay.png" alt="支付宝" />
|
||||
</label>
|
||||
</div>
|
||||
<!-- 单选按钮 2 -->
|
||||
<div
|
||||
class="col-6 d-flex justify-content-center mb-3 option-box"
|
||||
:class="{ 'selected-box': selectedpay === 'wechat' }"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
id="option2"
|
||||
name="options"
|
||||
class="hidden-radio"
|
||||
value="wechat"
|
||||
v-model="selectedpay"
|
||||
/>
|
||||
<label for="option2" class="label-style">
|
||||
<img src="../../assets/images/wechat.png" alt="微信支付" />
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn custom-btn" @click="deposit">立刻充值</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
name: "Balance",
|
||||
data() {
|
||||
return {
|
||||
rechargeAmount: 0,
|
||||
selectedpay: "",
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState("userinfo", {
|
||||
balance: (state) => (state.user ? state.user.balance : 0),
|
||||
}),
|
||||
formattedRechargeAmount: {
|
||||
get() {
|
||||
return this.rechargeAmount === 0 ? "" : this.rechargeAmount;
|
||||
},
|
||||
set(value) {
|
||||
this.rechargeAmount = value === "" ? 0 : Number(value);
|
||||
},
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.$store.dispatch("userinfo/fetchUserInfo");
|
||||
},
|
||||
methods: {
|
||||
deposit() {
|
||||
if (this.rechargeAmount <= 0) {
|
||||
this.$alert("充值金额必须大于0", "danger");
|
||||
return;
|
||||
}
|
||||
if (!this.selectedpay) {
|
||||
this.$alert("请选择充值方式", "danger");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
console.log(`Depositing ${this.rechargeAmount} using ${this.selectedpay}`);
|
||||
this.$alert("充值成功", "success");
|
||||
} catch (error) {
|
||||
console.error("充值失败:", error);
|
||||
this.$alert("充值失败，请稍后再试", "danger");
|
||||
}
|
||||
this.rechargeAmount = 0;
|
||||
this.selectedpay = "";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
input[type="radio"].hidden-radio {
|
||||
display: none; /* 隐藏原生单选按钮 */
|
||||
}
|
||||
/* 禁用数字输入框的调节按钮 */
|
||||
input[type="number"]::-webkit-inner-spin-button,
|
||||
input[type="number"]::-webkit-outer-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
-moz-appearance: textfield; /* 针对 Firefox */
|
||||
}
|
||||
/* 余额盒子样式 */
|
||||
.balance-box {
|
||||
background-color: #f0f8ff; /* 柔和的背景色 */
|
||||
border: 1px solid #d1e7ff; /* 边框颜色 */
|
||||
border-radius: 10px; /* 圆角 */
|
||||
padding: 15px; /* 内边距 */
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 余额文本样式 */
|
||||
.balance-text {
|
||||
font-size: 1.2rem;
|
||||
color: #333;
|
||||
margin: 0;
|
||||
}
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* 余额数字样式 */
|
||||
.balance-amount {
|
||||
font-weight: bold;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
/* 图标样式 */
|
||||
.balance-icon {
|
||||
color: #007bff;
|
||||
margin-right: 8px;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
/* 卡片样式 */
|
||||
.custom-card {
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
padding: 20px;
|
||||
max-width: 600px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
/* 标题样式 */
|
||||
.card-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 余额样式 */
|
||||
.balance-text {
|
||||
font-size: 1.2rem;
|
||||
color: #666;
|
||||
}
|
||||
.balance-amount {
|
||||
font-weight: bold;
|
||||
color: #007bff;
|
||||
}
|
||||
|
||||
/* 输入框样式 */
|
||||
.custom-input {
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.custom-input-text {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
/* 支付方式样式 */
|
||||
.option-box {
|
||||
padding: 10px;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 10px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.option-box.selected-box {
|
||||
border-color: #007bff;
|
||||
background-color: #e9f5ff;
|
||||
}
|
||||
.label-style {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 按钮样式 */
|
||||
.custom-btn {
|
||||
background: linear-gradient(45deg, #007bff, #0056b3);
|
||||
color: #fff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 10px 20px;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
transition: 0.3s ease;
|
||||
}
|
||||
.custom-btn:hover {
|
||||
background: linear-gradient(45deg, #0056b3, #003f7f);
|
||||
}
|
||||
|
||||
/* 全局字体 */
|
||||
body {
|
||||
font-family: "Arial", sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user