修改河南项目的管理后台ui

This commit is contained in:
2026-09-27 10:00:18 +08:00
parent ab91b0ca82
commit 266dad03e4
28 changed files with 406 additions and 1288 deletions
+2
View File
@@ -255,3 +255,5 @@ aside {
// 皮肤层放最后,保证覆盖 Element UI 默认样式
@import './skin.scss';
// 开关(状态列)已改为自研组件 components/CapsuleSwitch(自带 scoped 样式),
// 不再需要历史上那种全局 ::v-deep 覆盖 el-switch 内部结构的写法。
+3
View File
@@ -33,6 +33,8 @@ import ImageUpload from "@/components/ImageUpload"
import ImagePreview from "@/components/ImagePreview"
// 字典标签组件
import DictTag from '@/components/DictTag'
// 胶囊开关组件(替代 el-switch)
import CapsuleSwitch from '@/components/CapsuleSwitch'
// 头部标签组件
import VueMeta from 'vue-meta'
// 字典数据组件
@@ -58,6 +60,7 @@ Vue.component('Editor', Editor)
Vue.component('FileUpload', FileUpload)
Vue.component('ImageUpload', ImageUpload)
Vue.component('ImagePreview', ImagePreview)
Vue.component('CapsuleSwitch', CapsuleSwitch)
Vue.use(directive)
Vue.use(plugins)
@@ -129,70 +129,6 @@ export default {
};
</script>
<style lang="scss" scoped>
::v-deep .el-switch {
border-radius: 0px !important;
height: 24px !important;
}
::v-deep .el-switch__core {
width: 70px !important;
height: 24px;
border-radius: 3px;
border: none;
}
::v-deep .el-switch__core::after {
width: 50%;
height: 24px;
border-radius: 0px;
top: 0px !important;
right: 0px !important;
left: 0px;
border: 1px solid #ccc;
border-radius: 3px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
margin-left: -35px;
box-sizing: border-box;
top: 0px !important;
right: 0px !important;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--right {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
right: 6px;
margin-left: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
/* 激活时另一个文字消失 */
::v-deep .el-switch__label.is-active {
text-align: center;
display: none;
}
/*开启时文字位置设置*/
::v-deep .el-switch__label--left {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
left: 5px;
margin-right: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
#main {
width: 500px;
height: 400px;
@@ -216,79 +216,6 @@ export default {
};
</script>
<style lang="scss" scoped>
::v-deep .el-switch {
border-radius: 0px !important;
height: 24px !important;
}
::v-deep .el-switch__core {
width: 70px !important;
height: 24px;
border-radius: 3px;
border: none;
}
::v-deep .el-switch__core::after {
width: 50%;
height: 24px;
border-radius: 0px;
top: 0px !important;
right: 0px !important;
left: 0px;
border: 1px solid #ccc;
border-radius: 3px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
margin-left: -35px;
box-sizing: border-box;
top: 0px !important;
right: 0px !important;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--right {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
right: 6px;
margin-left: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
/* 激活时另一个文字消失 */
::v-deep .el-switch__label.is-active {
text-align: center;
display: none;
}
/*开启时文字位置设置*/
::v-deep .el-switch__label--left {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
left: 5px;
margin-right: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
#main {
width: 500px;
height: 400px;
@@ -263,79 +263,6 @@ export default {
};
</script>
<style lang="scss" scoped>
::v-deep .el-switch {
border-radius: 0px !important;
height: 24px !important;
}
::v-deep .el-switch__core {
width: 70px !important;
height: 24px;
border-radius: 3px;
border: none;
}
::v-deep .el-switch__core::after {
width: 50%;
height: 24px;
border-radius: 0px;
top: 0px !important;
right: 0px !important;
left: 0px;
border: 1px solid #ccc;
border-radius: 3px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
margin-left: -35px;
box-sizing: border-box;
top: 0px !important;
right: 0px !important;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--right {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
right: 6px;
margin-left: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
/* 激活时另一个文字消失 */
::v-deep .el-switch__label.is-active {
text-align: center;
display: none;
}
/*开启时文字位置设置*/
::v-deep .el-switch__label--left {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
left: 5px;
margin-right: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
#main {
width: 500px;
height: 400px;
@@ -369,70 +369,6 @@ export default {
};
</script>
<style lang="scss" scoped>
::v-deep .el-switch {
border-radius: 0px !important;
height: 24px !important;
}
::v-deep .el-switch__core {
width: 70px !important;
height: 24px;
border-radius: 3px;
border: none;
}
::v-deep .el-switch__core::after {
width: 50%;
height: 24px;
border-radius: 0px;
top: 0px !important;
right: 0px !important;
left: 0px;
border: 1px solid #ccc;
border-radius: 3px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
margin-left: -35px;
box-sizing: border-box;
top: 0px !important;
right: 0px !important;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--right {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
right: 6px;
margin-left: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
/* 激活时另一个文字消失 */
::v-deep .el-switch__label.is-active {
text-align: center;
display: none;
}
/*开启时文字位置设置*/
::v-deep .el-switch__label--left {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
left: 5px;
margin-right: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
#main {
width: 500px;
height: 400px;
@@ -106,7 +106,10 @@
<el-tag v-if="scope.row.poolTypes" :type="poolTagType(scope.row.poolTypes)" size="mini">{{ poolLabel(scope.row.poolTypes) }}</el-tag>
</template>
</el-table-column>
<el-table-column prop="betSymbols" label="投注符号" width="140" align="center" />
<!-- ★ min-width 而不是 width:展开列(48)+其余 11 列原全为固定宽,合计 1368px,
没有弹性列时表格宽度恒等于列宽之和(table-layout.js:182-194),1920 视口下右侧空 216px。
投注符号是拼接字符串、长度波动最大,交给它吃剩余宽度最合适。 -->
<el-table-column prop="betSymbols" label="投注符号" min-width="140" align="center" />
<el-table-column prop="totalBetAmount" label="总下注" width="100" align="right" />
<el-table-column prop="userRoundPayout" label="回合实际赔付" width="120" align="right">
<template slot-scope="scope">
@@ -24,7 +24,11 @@
<!-- 卡密列表 -->
<el-table :data="cardList" v-loading="tableLoading" border stripe style="width: 100%">
<el-table-column prop="id" label="ID" width="70" align="center" />
<el-table-column prop="cardCode" label="卡密编码" width="200" align="center">
<!-- ★ 这一列必须是 min-width:卡密编码最长(32 位等宽字符 + 复制按钮),
且它改宽后本表就有了弹性列,才会撑满容器。
原来 8 列全是固定 width,列宽和恒为 1000px,《Element》table-layout.js:182-194
走 else 分支 ⇒ bodyWidth = 列宽之和,容器再宽也不拉伸,右侧空一条。 -->
<el-table-column prop="cardCode" label="卡密编码" min-width="200" align="center">
<template slot-scope="scope">
<span style="font-family: 'Courier New', monospace; color: #9a5c35; font-weight: 600; margin-right: 6px;">{{ scope.row.cardCode }}</span>
<el-button type="text" size="mini" @click="copyText(scope.row.cardCode)">复制</el-button>
+6 -72
View File
@@ -50,16 +50,14 @@
<el-table-column label="奖励区间" align="center" prop="awardSection" />
<el-table-column label="启用状态" align="center" prop="status">
<template slot-scope="scope">
<el-switch
<capsule-switch
v-model="scope.row.status"
:active-value="'0'"
:inactive-value="'1'"
inactive-color="#a4485a"
active-color="#457450"
inactive-text="是"
active-text="否"
active-value="0"
inactive-value="1"
active-text="启用"
inactive-text="禁用"
@change="updateUserStatus(scope.row)"
></el-switch>
/>
</template>
</el-table-column>
<el-table-column label="排序" align="center" prop="sortBy" />
@@ -427,68 +425,4 @@ export default {
border-radius: 50%;
display: inline-block;
}
::v-deep .el-switch {
border-radius: 0px !important;
height: 24px !important;
}
::v-deep .el-switch__core {
width: 70px !important;
height: 24px;
border-radius: 3px;
border: none;
}
::v-deep .el-switch__core::after {
width: 50%;
height: 24px;
border-radius: 0px;
top: 0px !important;
right: 0px !important;
left: 0px;
border: 1px solid #ccc;
border-radius: 3px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
margin-left: -35px;
box-sizing: border-box;
top: 0px !important;
right: 0px !important;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--right {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
right: 6px;
margin-left: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
/* 激活时另一个文字消失 */
::v-deep .el-switch__label.is-active {
text-align: center;
display: none;
}
/*开启时文字位置设置*/
::v-deep .el-switch__label--left {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
left: 5px;
margin-right: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
</style>
+10 -78
View File
@@ -33,30 +33,26 @@
<!-- 仅在通用“宝箱分类”菜单展示是否对战类型;对战/经典分类已由路由锁定类型 -->
<el-table-column v-if="$route.query.type == null" align="center" prop="isFightType" label="是否对战类型">
<template slot-scope="scope">
<el-switch
<capsule-switch
v-model="scope.row.isFightType"
:active-value="'0'"
:inactive-value="'1'"
inactive-color="#a4485a"
active-color="#457450"
inactive-text="是"
active-text="否"
active-value="0"
inactive-value="1"
active-text="是"
inactive-text="否"
@change="updateUserStatus(scope.row)"
></el-switch>
/>
</template>
</el-table-column>
<el-table-column align="center" prop="isShow" label="是否显示">
<template slot-scope="scope">
<el-switch
<capsule-switch
v-model="scope.row.isShow"
:active-value="'0'"
:inactive-value="'1'"
active-color="#457450"
inactive-color="#a4485a"
active-value="1"
inactive-value="0"
active-text="显示"
inactive-text="隐藏"
@change="updateUserStatus(scope.row)"
></el-switch>
/>
</template>
</el-table-column>
<el-table-column align="center" prop="sort" label="宝箱分类排序"></el-table-column>
@@ -213,68 +209,4 @@ export default {
.home {
padding: 20px;
}
::v-deep .el-switch {
border-radius: 0px !important;
height: 24px !important;
}
::v-deep .el-switch__core {
width: 70px !important;
height: 24px;
border-radius: 3px;
border: none;
}
::v-deep .el-switch__core::after {
width: 50%;
height: 24px;
border-radius: 0px;
top: 0px !important;
right: 0px !important;
left: 0px;
border: 1px solid #ccc;
border-radius: 3px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
margin-left: -35px;
box-sizing: border-box;
top: 0px !important;
right: 0px !important;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--right {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
right: 6px;
margin-left: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
/* 激活时另一个文字消失 */
::v-deep .el-switch__label.is-active {
text-align: center;
display: none;
}
/*开启时文字位置设置*/
::v-deep .el-switch__label--left {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
left: 5px;
margin-right: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
</style>
+14 -84
View File
@@ -320,16 +320,14 @@
<el-input-number v-model="form.sort" :min="1" :max="1000" label="请选择"></el-input-number>
</el-form-item>
<el-form-item label="是否对战宝箱" prop="isFight">
<el-switch
<capsule-switch
v-model="form.isFight"
:active-value="'0'"
:inactive-value="'1'"
active-color="#457450"
inactive-color="#a4485a"
active-text="否"
inactive-text="是"
active-value="1"
inactive-value="0"
active-text="是"
inactive-text="否"
:disabled="$route.query.isFight != null"
></el-switch>
/>
</el-form-item>
<!-- 宝箱类型已隐藏(编辑时保留原值提交)
<el-form-item label="宝箱类型" prop="boxType">
@@ -347,27 +345,23 @@
<el-input-number v-model="form.compAmount" :min="0" :max="1000" label="请选择"></el-input-number>
</el-form-item>
<el-form-item label="宝箱状态" prop="status">
<el-switch
<capsule-switch
v-model="form.status"
:active-value="'1'"
:inactive-value="'0'"
active-color="#a4485a"
inactive-color="#457450"
active-value="0"
inactive-value="1"
active-text="正常"
inactive-text="停用"
></el-switch>
/>
</el-form-item>
<el-form-item label="是否首页推荐" prop="isHome">
<el-switch
<capsule-switch
v-model="form.isHome"
:active-value="'1'"
:inactive-value="'0'"
active-color="#a4485a"
inactive-color="#457450"
active-value="1"
inactive-value="0"
active-text="是"
inactive-text="否"
@change="hh()"
></el-switch>
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
@@ -1381,70 +1375,6 @@ export default {
text-decoration-style: dashed;
text-underline-position: under;
}
::v-deep .el-switch {
border-radius: 0px !important;
height: 24px !important;
}
::v-deep .el-switch__core {
width: 70px !important;
height: 24px;
border-radius: 3px;
border: none;
}
::v-deep .el-switch__core::after {
width: 50%;
height: 24px;
border-radius: 0px;
top: 0px !important;
right: 0px !important;
left: 0px;
border: 1px solid #ccc;
border-radius: 3px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
margin-left: -35px;
box-sizing: border-box;
top: 0px !important;
right: 0px !important;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--right {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
right: 6px;
margin-left: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
/* 激活时另一个文字消失 */
::v-deep .el-switch__label.is-active {
text-align: center;
display: none;
}
/*开启时文字位置设置*/
::v-deep .el-switch__label--left {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
left: 5px;
margin-right: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
.magicbox {
margin: 0 auto;
margin-top: 5px;
@@ -7,16 +7,14 @@
<el-table-column align="center" prop="productA" label="到账金额"></el-table-column>
<el-table-column align="center" label="状态">
<template slot-scope="scope">
<el-switch
<capsule-switch
v-model="scope.row.status"
:active-value="'0'"
:inactive-value="'1'"
active-color="#457450"
inactive-color="#a4485a"
inactive-text="启用"
active-text="禁用"
active-value="0"
inactive-value="1"
active-text="启用"
inactive-text="禁用"
@change="handleChangeType(scope.row)"
></el-switch>
/>
</template>
</el-table-column>
<el-table-column align="center" label="操作">
@@ -208,68 +206,4 @@ export default {
padding: 20px;
}
::v-deep .el-switch {
border-radius: 0px !important;
height: 24px !important;
}
::v-deep .el-switch__core {
width: 70px !important;
height: 24px;
border-radius: 3px;
border: none;
}
::v-deep .el-switch__core::after {
width: 50%;
height: 24px;
border-radius: 0px;
top: 0px !important;
right: 0px !important;
left: 0px;
border: 1px solid #ccc;
border-radius: 3px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
margin-left: -35px;
box-sizing: border-box;
top: 0px !important;
right: 0px !important;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--right {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
right: 6px;
margin-left: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
/* 激活时另一个文字消失 */
::v-deep .el-switch__label.is-active {
text-align: center;
display: none;
}
/*开启时文字位置设置*/
::v-deep .el-switch__label--left {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
left: 5px;
margin-right: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
</style>
+44 -79
View File
@@ -11,30 +11,26 @@
<el-table-column align="center" prop="sort" label="图片排序"></el-table-column>
<el-table-column align="center" prop="status" label="状态">
<template slot-scope="scope">
<el-switch
<capsule-switch
v-model="scope.row.status"
:active-value="'0'"
:inactive-value="'1'"
inactive-color="#a4485a"
active-color="#457450"
active-text="禁用"
inactive-text="启用"
active-value="0"
inactive-value="1"
active-text="启用"
inactive-text="禁用"
@change="updateUserStatus(scope.row)"
></el-switch>
/>
</template>
</el-table-column>
<el-table-column align="center" prop="isDefault" label="是否默认">
<template slot-scope="scope">
<el-switch
<capsule-switch
v-model="scope.row.isDefault"
:active-value="'0'"
:inactive-value="'1'"
active-color="#a4485a"
inactive-color="#457450"
active-value="1"
inactive-value="0"
active-text="是"
inactive-text="否"
@change="updateUserStatus(scope.row)"
></el-switch>
@change="updateDefault(scope.row)"
/>
</template>
</el-table-column>
<el-table-column align="center" prop="sort" label="操作">
@@ -137,6 +133,38 @@ export default {
this.getList();
});
},
/**
* 「是否默认」单独处理
* 默认头像全表只能有一条(用于新用户注册时分配初始头像),后端已做互斥:
* 置为「是」会自动把其他记录的默认标记清掉。这里只负责在开启时给出提示,
* 让运营知道「设了这条,原来那条就不默认了」,避免误以为是叠加。
*/
updateDefault(res) {
if (res.isDefault !== "1") {
// 关闭某条的默认(后端会把该条置否);若全表因此没有默认头像,提示一句
this.updateUserStatus(res);
return;
}
const prev = this.tableData.find(
row => row.id !== res.id && row.isDefault === "1"
);
const msg = prev
? `已将「${res.id}」设为默认头像,原默认头像「${prev.id}」将自动取消默认。`
: `已将「${res.id}」设为默认头像。默认头像全站只会有一个。`;
this.$confirm(msg, "设置默认头像", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
})
.then(() => {
this.updateUserStatus(res);
})
.catch(() => {
// 取消 → 回滚开关视觉状态并重新拉取,保证界面与库一致
res.isDefault = "0";
this.getList();
});
},
handleSubmits() {
changheuserAvatar(this.form).then(res => {
this.dialogFormVisible = false;
@@ -177,68 +205,5 @@ export default {
.home {
padding: 20px;
}
::v-deep .el-switch {
border-radius: 0px !important;
height: 24px !important;
}
::v-deep .el-switch__core {
width: 70px !important;
height: 24px;
border-radius: 3px;
border: none;
}
::v-deep .el-switch__core::after {
width: 50%;
height: 24px;
border-radius: 0px;
top: 0px !important;
right: 0px !important;
left: 0px;
border: 1px solid #ccc;
border-radius: 3px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
margin-left: -35px;
box-sizing: border-box;
top: 0px !important;
right: 0px !important;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--right {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
right: 6px;
margin-left: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
/* 激活时另一个文字消失 */
::v-deep .el-switch__label.is-active {
text-align: center;
display: none;
}
/*开启时文字位置设置*/
::v-deep .el-switch__label--left {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
left: 5px;
margin-right: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
/* 开关统一使用全局组件 CapsuleSwitch,此处不再覆盖 el-switch 样式 */
</style>
+7 -72
View File
@@ -35,16 +35,14 @@
</el-table-column>
<el-table-column align="center" prop="status" label="状态">
<template slot-scope="scope">
<el-switch
<capsule-switch
v-model="scope.row.status"
:active-value="'0'"
:inactive-value="'1'"
active-color="#457450"
inactive-color="#a4485a"
inactive-text="启用"
active-text="禁用"
active-value="0"
inactive-value="1"
active-text="启用"
inactive-text="禁用"
@change="handleChangeType(scope.row)"
></el-switch>
/>
</template>
</el-table-column>
<el-table-column align="center" prop="sort" label="图片排序">
@@ -238,68 +236,5 @@ export default {
text-underline-position: under;
}
::v-deep .el-switch {
border-radius: 0px !important;
height: 24px !important;
}
::v-deep .el-switch__core {
width: 70px !important;
height: 24px;
border-radius: 3px;
border: none;
}
::v-deep .el-switch__core::after {
width: 50%;
height: 24px;
border-radius: 0px;
top: 0px !important;
right: 0px !important;
left: 0px;
border: 1px solid #ccc;
border-radius: 3px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
margin-left: -35px;
box-sizing: border-box;
top: 0px !important;
right: 0px !important;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--right {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
right: 6px;
margin-left: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
/* 激活时另一个文字消失 */
::v-deep .el-switch__label.is-active {
text-align: center;
display: none;
}
/*开启时文字位置设置*/
::v-deep .el-switch__label--left {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
left: 5px;
margin-right: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
/* 开关统一使用全局组件 CapsuleSwitch,此处不再覆盖 el-switch 样式 */
</style>
@@ -81,16 +81,14 @@
<el-table-column label="浏览量" align="center" prop="pageView" />
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<el-switch
<capsule-switch
v-model="scope.row.status"
:active-value="'0'"
:inactive-value="'1'"
inactive-color="#a4485a"
active-color="#457450"
active-text="禁用"
inactive-text="启用"
active-value="0"
inactive-value="1"
active-text="启用"
inactive-text="禁用"
@change="updateUserStatus(scope.row)"
></el-switch>
/>
</template>
</el-table-column>
<el-table-column width="240" label="操作" align="center" class-name="small-padding fixed-width">
@@ -361,69 +359,3 @@ export default {
}
};
</script>
<style scoped lang="scss">
::v-deep .el-switch {
border-radius: 0px !important;
height: 24px !important;
}
::v-deep .el-switch__core {
width: 70px !important;
height: 24px;
border-radius: 3px;
border: none;
}
::v-deep .el-switch__core::after {
width: 50%;
height: 24px;
border-radius: 0px;
top: 0px !important;
right: 0px !important;
left: 0px;
border: 1px solid #ccc;
border-radius: 3px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
margin-left: -35px;
box-sizing: border-box;
top: 0px !important;
right: 0px !important;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--right {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
right: 6px;
margin-left: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
/* 激活时另一个文字消失 */
::v-deep .el-switch__label.is-active {
text-align: center;
display: none;
}
/*开启时文字位置设置*/
::v-deep .el-switch__label--left {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
left: 5px;
margin-right: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
</style>
@@ -87,16 +87,14 @@
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<el-switch
<capsule-switch
v-model="scope.row.status"
:active-value="'0'"
:inactive-value="'1'"
inactive-color="#a4485a"
active-color="#457450"
active-text="禁用"
inactive-text="启用"
active-value="0"
inactive-value="1"
active-text="启用"
inactive-text="禁用"
@change="updateUserStatus(scope.row)"
></el-switch>
/>
</template>
</el-table-column>
<el-table-column label="创建时间" prop="createTime"></el-table-column>
@@ -335,70 +333,3 @@ export default {
}
};
</script>
<style lang="scss" scoped>
::v-deep .el-switch {
border-radius: 0px !important;
height: 24px !important;
}
::v-deep .el-switch__core {
width: 70px !important;
height: 24px;
border-radius: 3px;
border: none;
}
::v-deep .el-switch__core::after {
width: 50%;
height: 24px;
border-radius: 0px;
top: 0px !important;
right: 0px !important;
left: 0px;
border: 1px solid #ccc;
border-radius: 3px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
margin-left: -35px;
box-sizing: border-box;
top: 0px !important;
right: 0px !important;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--right {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
right: 6px;
margin-left: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
/* 激活时另一个文字消失 */
::v-deep .el-switch__label.is-active {
text-align: center;
display: none;
}
/*开启时文字位置设置*/
::v-deep .el-switch__label--left {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
left: 5px;
margin-right: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
</style>
@@ -175,68 +175,4 @@ export default {
.home {
padding: 20px;
}
::v-deep .el-switch {
border-radius: 0px !important;
height: 24px !important;
}
::v-deep .el-switch__core {
width: 70px !important;
height: 24px;
border-radius: 3px;
border: none;
}
::v-deep .el-switch__core::after {
width: 50%;
height: 24px;
border-radius: 0px;
top: 0px !important;
right: 0px !important;
left: 0px;
border: 1px solid #ccc;
border-radius: 3px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
margin-left: -35px;
box-sizing: border-box;
top: 0px !important;
right: 0px !important;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--right {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
right: 6px;
margin-left: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
/* 激活时另一个文字消失 */
::v-deep .el-switch__label.is-active {
text-align: center;
display: none;
}
/*开启时文字位置设置*/
::v-deep .el-switch__label--left {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
left: 5px;
margin-right: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
</style>
+4 -70
View File
@@ -244,16 +244,14 @@
</el-table-column>
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<el-switch
<capsule-switch
v-model="scope.row.status"
:active-value="'1'"
:inactive-value="'0'"
active-color="#a4485a"
inactive-color="#457450"
active-value="0"
inactive-value="1"
active-text="启用"
inactive-text="禁用"
@change="handleChangeType(scope.row)"
></el-switch>
/>
</template>
</el-table-column>
<el-table-column width="190" label="操作" align="center" class-name="small-padding fixed-width">
@@ -904,70 +902,6 @@ export default {
.wm-hint { color: #7a664e; font-size: 12px; }
.wm-link { margin-left: auto; color: #9a5c35; }
::v-deep .el-switch {
border-radius: 0px !important;
height: 24px !important;
}
::v-deep .el-switch__core {
width: 70px !important;
height: 24px;
border-radius: 3px;
border: none;
}
::v-deep .el-switch__core::after {
width: 50%;
height: 24px;
border-radius: 0px;
top: 0px !important;
right: 0px !important;
left: 0px;
border: 1px solid #ccc;
border-radius: 3px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
margin-left: -35px;
box-sizing: border-box;
top: 0px !important;
right: 0px !important;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--right {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
right: 6px;
margin-left: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
/* 激活时另一个文字消失 */
::v-deep .el-switch__label.is-active {
text-align: center;
display: none;
}
/*开启时文字位置设置*/
::v-deep .el-switch__label--left {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
left: 5px;
margin-right: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
#main {
width: 500px;
height: 450px;
@@ -879,50 +879,6 @@ export default {
</script>
<style lang="scss" scoped>
::v-deep .el-switch {
border-radius: 0px !important;
height: 24px !important;
}
::v-deep .el-switch__core {
width: 70px !important;
height: 24px;
border-radius: 3px;
border: none;
}
::v-deep .el-switch__core::after {
width: 50%;
height: 24px;
border-radius: 0px;
top: 0px !important;
left: 0px;
border: 1px solid #ccc;
border-radius: 3px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
margin-left: -35px;
top: 0px !important;
border: 1px solid #ccc;
border-radius: 3px;
}
::v-deep .el-switch__label--right {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
right: 6px;
color: rgba(255, 255, 255, 1);
span { font-size: 13px; color: #fff; }
}
::v-deep .el-switch__label.is-active { display: none; }
::v-deep .el-switch__label--left {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
left: 5px;
color: rgba(255, 255, 255, 1);
span { font-size: 13px; color: #fff; }
}
::v-deep .under {
text-decoration: underline;
text-decoration-style: dashed;
+6 -72
View File
@@ -72,16 +72,14 @@
</el-table-column>
<el-table-column align="center" prop="useStatus" label="是否启用">
<template slot-scope="scope">
<el-switch
<capsule-switch
v-model="scope.row.useStatus"
:active-value="'0'"
:inactive-value="'1'"
inactive-color="#a4485a"
active-color="#457450"
inactive-text="启用"
active-text="禁用"
active-value="1"
inactive-value="0"
active-text="启用"
inactive-text="禁用"
@change="updateUserStatus(scope.row)"
></el-switch>
/>
</template>
</el-table-column>
<el-table-column align="center" prop="description" label="红包描述" width="300" show-overflow-tooltip></el-table-column>
@@ -573,70 +571,6 @@ export default {
justify-content: center;
line-height: 1;
}
::v-deep .el-switch {
border-radius: 0px !important;
height: 24px !important;
}
::v-deep .el-switch__core {
width: 70px !important;
height: 24px;
border-radius: 3px;
border: none;
}
::v-deep .el-switch__core::after {
width: 50%;
height: 24px;
border-radius: 0px;
top: 0px !important;
right: 0px !important;
left: 0px;
border: 1px solid #ccc;
border-radius: 3px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
margin-left: -35px;
box-sizing: border-box;
top: 0px !important;
right: 0px !important;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--right {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
right: 6px;
margin-left: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
/* 激活时另一个文字消失 */
::v-deep .el-switch__label.is-active {
text-align: center;
display: none;
}
/*开启时文字位置设置*/
::v-deep .el-switch__label--left {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
left: 5px;
margin-right: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
.kami {
padding: 15px;
background-color: #d8c3b0;
+15 -85
View File
@@ -152,44 +152,38 @@
<el-table-column label="账户积分" align="center" prop="accountCredits" />
<el-table-column label="帐号状态" align="center" prop="status" class="kg">
<template slot-scope="scope">
<el-switch
<capsule-switch
v-model="scope.row.status"
:active-value="'1'"
:inactive-value="'0'"
active-color="#a4485a"
inactive-color="#457450"
active-text="正常"
active-value="0"
inactive-value="1"
active-text="启用"
inactive-text="停用"
@change="updateUserStatus(scope.row)"
></el-switch>
/>
</template>
</el-table-column>
<el-table-column label="提货状态" align="center" prop="deliveryStatus" class="kg">
<template slot-scope="scope">
<el-switch
<capsule-switch
v-model="scope.row.deliveryStatus"
:active-value="'1'"
:inactive-value="'0'"
active-color="#a4485a"
inactive-color="#457450"
active-value="0"
inactive-value="1"
active-text="启用"
inactive-text="禁用"
inactive-text="停用"
@change="updateUserStatus(scope.row)"
></el-switch>
/>
</template>
</el-table-column>
<el-table-column label="赠送状态" align="center" prop="giftStatus" class="kg">
<template slot-scope="scope">
<el-switch
<capsule-switch
v-model="scope.row.giftStatus"
:active-value="'1'"
:inactive-value="'0'"
active-color="#a4485a"
inactive-color="#457450"
active-value="0"
inactive-value="1"
active-text="启用"
inactive-text="禁用"
inactive-text="停用"
@change="updateUserStatus(scope.row)"
></el-switch>
/>
</template>
</el-table-column>
<!-- 推广等级已按要求隐藏(列表与详情都不再展示);最后登录时间移入详情 -->
@@ -905,70 +899,6 @@ export default {
};
</script>
<style lang="scss" scoped>
::v-deep .el-switch {
border-radius: 0px !important;
height: 24px !important;
}
::v-deep .el-switch__core {
width: 70px !important;
height: 24px;
border-radius: 3px;
border: none;
}
::v-deep .el-switch__core::after {
width: 50%;
height: 24px;
border-radius: 0px;
top: 0px !important;
right: 0px !important;
left: 0px;
border: 1px solid #ccc;
border-radius: 3px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
margin-left: -35px;
box-sizing: border-box;
top: 0px !important;
right: 0px !important;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--right {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
right: 6px;
margin-left: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
/* 激活时另一个文字消失 */
::v-deep .el-switch__label.is-active {
text-align: center;
display: none;
}
/*开启时文字位置设置*/
::v-deep .el-switch__label--left {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
left: 5px;
margin-right: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
#main {
width: 500px;
height: 400px;
@@ -323,69 +323,3 @@ export default {
}
};
</script>
<style lang="scss" scoped>
::v-deep .el-switch {
border-radius: 0px !important;
height: 24px !important;
}
::v-deep .el-switch__core {
width: 70px !important;
height: 24px;
border-radius: 3px;
border: none;
}
::v-deep .el-switch__core::after {
width: 50%;
height: 24px;
border-radius: 0px;
top: 0px !important;
right: 0px !important;
left: 0px;
border: 1px solid #ccc;
border-radius: 3px;
}
::v-deep .el-switch.is-checked .el-switch__core::after {
margin-left: -35px;
box-sizing: border-box;
top: 0px !important;
right: 0px !important;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
}
/*关闭时文字位置设置*/
::v-deep .el-switch__label--right {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
right: 6px;
margin-left: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
/* 激活时另一个文字消失 */
::v-deep .el-switch__label.is-active {
text-align: center;
display: none;
}
/*开启时文字位置设置*/
::v-deep .el-switch__label--left {
text-align: center;
position: absolute;
width: 40%;
z-index: 1;
left: 5px;
margin-right: 0px;
color: rgba(255, 255, 255, 1);
span {
font-size: 13px;
box-sizing: border-box;
color: #fff;
}
}
</style>
+4 -1
View File
@@ -101,7 +101,10 @@
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="角色编号" prop="roleId" width="120" />
<el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
<el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
<!-- ★ min-width 而不是 width:本表 8 列原全为固定宽(合计 1075px),
没有弹性列时 Element 不会拉伸(table-layout.js:182-194),右侧会空出约 500px。
权限字符是本表最该吃剩余宽度的列(内容最长且已带 show-overflow-tooltip,加宽无副作用)。 -->
<el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" min-width="150" />
<el-table-column label="显示顺序" prop="roleSort" width="100" />
<el-table-column label="状态" align="center" width="100">
<template slot-scope="scope">