修改河南项目的管理后台ui
This commit is contained in:
@@ -255,3 +255,5 @@ aside {
|
||||
|
||||
// 皮肤层放最后,保证覆盖 Element UI 默认样式
|
||||
@import './skin.scss';
|
||||
// 开关(状态列)已改为自研组件 components/CapsuleSwitch(自带 scoped 样式),
|
||||
// 不再需要历史上那种全局 ::v-deep 覆盖 el-switch 内部结构的写法。
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user